diff --git a/content/blog/2019-08-08-react-v16.9.0.md b/content/blog/2019-08-08-react-v16.9.0.md index e83e9375a05..9442f2b404f 100644 --- a/content/blog/2019-08-08-react-v16.9.0.md +++ b/content/blog/2019-08-08-react-v16.9.0.md @@ -48,7 +48,7 @@ const userProfile = { }; // This will now warn: Profile -```` +``` **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.) @@ -70,7 +70,6 @@ This pattern was almost never used in the wild, and supporting it causes React t We don't expect most codebases to be affected by this. - ## New Features {#new-features} ### 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(...). await act(async () => { // ... }); -```` +``` 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.** @@ -209,12 +208,12 @@ Refer to the documentation for [detailed installation instructions](/docs/instal ### React {#react} - * Add `` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172)) +* Add `` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172)) * Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532)) - ### React DOM +### React DOM {#react-dom} - * 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)) +* 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)) * Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047)) * Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145)) * Add support for the `disablePictureInPicture` attribute on ``. ([@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 * 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)) * Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998)) - ### React DOM Server +### React DOM Server {#react-dom-server} - * Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167)) +* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167)) - ### React Test Utilities and Test Renderer +### React Test Utilities and Test Renderer {#react-test-utilities-and-test-renderer} - * Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853)) +* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853)) * 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)) * 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)) * Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756)) diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 8e52dfae31e..b9f4b2eee94 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -4,7 +4,7 @@ author: [bvaughn] --- We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! -## What's changed? +## What's changed? {#whats-changed} A lot has changed in version 4! 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 [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. -## Which versions of React are supported? +## Which versions of React are supported? {#which-versions-of-react-are-supported} **`react-dom`** @@ -26,7 +26,7 @@ It also offers full support for React Hooks, including inspecting nested objects * `0`-`0.61`: Not supported * `0.62`: Will be supported (when 0.62 is released) -## How do I get the new DevTools? +## How do I get the new DevTools? {#how-do-i-get-the-new-devtools} 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/). 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 npm install -g react-devtools@^4 ``` -## Where did all of the DOM elements go? +## Where did all of the DOM elements go? {#where-did-all-of-the-dom-elements-go} The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies. Host nodes (e.g. HTML ``, React Native ``) are *hidden by default*, but this filter can be disabled:  -## How do I get the old version back? +## How do I get the old version back? {#how-do-i-get-the-old-version-back} If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM: @@ -70,7 +70,7 @@ yarn build:extension # Follow the on-screen instructions to complete installation ``` -## Thank you! +## Thank you! {#thank-you} We'd like to thank everyone who tested the early release of DevTools version 4. Your feedback helped improve this initial release significantly. diff --git a/content/docs/reference-profiler.md b/content/docs/reference-profiler.md index 58a9e41c9e5..cb64fef1a82 100644 --- a/content/docs/reference-profiler.md +++ b/content/docs/reference-profiler.md @@ -16,7 +16,7 @@ Its purpose is to help identify parts of an application that are slow and may be > To opt into production profiling, React provides a special production build with profiling enabled. > Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling) -## Usage +## Usage {#usage} A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree. 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( > > 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. -## `onRender` Callback +## `onRender` Callback {#onrender-callback} The `Profiler` requires an `onRender` function as a prop. React calls this function any time a component within the profiled tree "commits" an update.