You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/blog/2019-08-08-react-v16.9.0.md
+9-10
Original file line number
Diff line number
Diff line change
@@ -48,7 +48,7 @@ const userProfile = {
48
48
};
49
49
// This will now warn:
50
50
<a href={userProfile.website}>Profile</a>
51
-
````
51
+
```
52
52
53
53
**In React 16.9,** this pattern continues to work, but it will log a warning. If you use `javascript:` URLs for logic, try to use React event handlers instead. (As a last resort, you can circumvent the protection with [`dangerouslySetInnerHTML`](/docs/dom-elements.html#dangerouslysetinnerhtml), but it is highly discouraged and often leads to security holes.)
54
54
@@ -70,7 +70,6 @@ This pattern was almost never used in the wild, and supporting it causes React t
70
70
71
71
We don't expect most codebases to be affected by this.
72
72
73
-
74
73
## New Features {#new-features}
75
74
76
75
### Async [`act()`](/docs/test-utils.html#act) for Testing {#async-act-for-testing}
@@ -89,7 +88,7 @@ An update to SomeComponent inside a test was not wrapped in act(...).
89
88
awaitact(async () => {
90
89
// ...
91
90
});
92
-
````
91
+
```
93
92
94
93
This solves the remaining cases where you couldn't use `act()` before, such as when the state update was inside an asynchronous function. As a result, **you should be able to fix all the remaining `act()` warnings in your tests now.**
95
94
@@ -209,12 +208,12 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
209
208
210
209
### React {#react}
211
210
212
-
* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
211
+
* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
213
212
* Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532))
214
213
215
-
### React DOM
214
+
### React DOM {#react-dom}
216
215
217
-
* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
216
+
* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
218
217
* Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047))
219
218
* Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145))
220
219
* Add support for the `disablePictureInPicture` attribute on `<video>`. ([@eek](https://github.com/eek) in [#15334](https://github.com/facebook/react/pull/15334))
@@ -229,13 +228,13 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
229
228
* Fix hiding Suspense fallback nodes when there is an `!important` style. ([@acdlite](https://github.com/acdlite) in [#15861](https://github.com/facebook/react/pull/15861) and [#15882](https://github.com/facebook/react/pull/15882))
230
229
* Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998))
231
230
232
-
### React DOM Server
231
+
### React DOM Server {#react-dom-server}
233
232
234
-
* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
233
+
* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
235
234
236
-
### React Test Utilities and Test Renderer
235
+
### React Test Utilities and Test Renderer {#react-test-utilities-and-test-renderer}
237
236
238
-
* Add `act(async () =>...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
237
+
* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
239
238
* Add support for nesting `act` from different renderers. ([@threepointone](https://github.com/threepointone) in [#16039](https://github.com/facebook/react/pull/16039) and [#16042](https://github.com/facebook/react/pull/16042))
240
239
* Warn in Strict Mode if effects are scheduled outside an `act()` call. ([@threepointone](https://github.com/threepointone) in [#15763](https://github.com/facebook/react/pull/15763) and [#16041](https://github.com/facebook/react/pull/16041))
241
240
* Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756))
Copy file name to clipboardExpand all lines: content/blog/2019-08-15-new-react-devtools.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ author: [bvaughn]
4
4
---
5
5
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
6
6
7
-
## What's changed?
7
+
## What's changed? {#whats-changed}
8
8
9
9
A lot has changed in version 4!
10
10
At a high level, this new version should offer significant performance gains and an improved navigation experience.
@@ -14,7 +14,7 @@ It also offers full support for React Hooks, including inspecting nested objects
14
14
15
15
[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
16
16
17
-
## Which versions of React are supported?
17
+
## Which versions of React are supported? {#which-versions-of-react-are-supported}
18
18
19
19
**`react-dom`**
20
20
@@ -26,7 +26,7 @@ It also offers full support for React Hooks, including inspecting nested objects
26
26
*`0`-`0.61`: Not supported
27
27
*`0.62`: Will be supported (when 0.62 is released)
28
28
29
-
## How do I get the new DevTools?
29
+
## How do I get the new DevTools? {#how-do-i-get-the-new-devtools}
30
30
31
31
React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
32
32
If you have already installed the extension, it should update automatically within the next couple of hours.
@@ -37,14 +37,14 @@ If you use the standalone shell (e.g. in React Native or Safari), you can instal
37
37
npm install -g react-devtools@^4
38
38
```
39
39
40
-
## Where did all of the DOM elements go?
40
+
## Where did all of the DOM elements go? {#where-did-all-of-the-dom-elements-go}
41
41
42
42
The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
43
43
Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
Copy file name to clipboardExpand all lines: content/docs/reference-profiler.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ Its purpose is to help identify parts of an application that are slow and may be
16
16
> To opt into production profiling, React provides a special production build with profiling enabled.
17
17
> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling)
18
18
19
-
## Usage
19
+
## Usage {#usage}
20
20
21
21
A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
22
22
It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
@@ -70,7 +70,7 @@ render(
70
70
>
71
71
> Although `Profiler` is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application.
72
72
73
-
## `onRender` Callback
73
+
## `onRender` Callback {#onrender-callback}
74
74
75
75
The `Profiler` requires an `onRender` function as a prop.
76
76
React calls this function any time a component within the profiled tree "commits" an update.
0 commit comments