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/2022-03-29-react-v18.md
+27-24Lines changed: 27 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -159,26 +159,27 @@ For more, see the RFC for [Suspense in React 18](https://github.com/reactjs/rfcs
159
159
160
160
In this release we took the opportunity to redesign the APIs we expose for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.
161
161
162
-
On the client, these APIs are:
162
+
#### React DOM Client
163
163
164
-
*`react-dom/client`
165
-
*`createRoot`
166
-
*`hydrateRoot`
167
-
*`react-dom/server`
168
-
*`renderToPipeableStream` (Node.js)
169
-
*`renderToReadableStream` (Web Streams)
164
+
These new APIs are now exported from `react-dom/client`:
170
165
171
-
Additionally, we’ve added limited support for Suspense to:
166
+
*`createRoot`: New method to create a root to `render` or `unmount`. Use it instead of `ReactDOM.render`. New features in React 18 don't work without it.
167
+
*`hydrateRoot`: New method to hydrate a server rendered application. Use it instead of `ReactDOM.hydrate` in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.
172
168
173
-
*`renderToString`
169
+
Both `createRoot` and `hydrateRoot` accept a new option called `onRecoverableError` in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError), or `console.error` in the older browsers.
174
170
175
-
And have deprecated:
171
+
[See docs for React DOM Client here](/docs/react-dom-client.html).
176
172
177
-
*`renderToNodeStream`
173
+
#### React DOM Server
178
174
179
-
Note: these APIs are designed to be upgraded at the same time. For example, upgrading to `createRoot` on the client, but keeping `renderToString`on the server is unsupported.
175
+
These new APIs are now exported from `react-dom/server` and have full support for streaming Suspense on the server:
180
176
181
-
[See docs for React DOM Server here](/docs/react-dom-server.html#overview).
177
+
*`renderToPipeableStream`: for streaming in Node environments.
178
+
*`renderToReadableStream`: for modern edge runtime environments, such as Deno and Cloudflare workers.
179
+
180
+
The existing `renderToString` method keeps working but is discouraged.
181
+
182
+
[See docs for React DOM Server here](/docs/react-dom-server.html).
182
183
183
184
### New Strict Mode Behaviors
184
185
@@ -217,29 +218,31 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
217
218
218
219
#### useId
219
220
220
-
`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how our streaming server renderer delivers HTML out-of-order.
`useId` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/docs/hooks-reference.html#useid).
223
222
224
223
#### useDeferredValue
225
224
226
-
`useDeferredValue`is a new hook that accepts a value and returns a new value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.
225
+
`useDeferredValue`lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input. [See docs here](/docs/hooks-reference.html#usedeferredvalue).
227
226
228
-
This hook is similar to user-space hooks which use debouncing or throttling to defer updates. The benefits to using `useDeferredValue` is that React will work on the update as soon as other work finishes (instead of waiting for an arbitrary amount of time), and like [`startTransition`](/docs/react-api.html#starttransition), deferred values can suspend without triggering an unexpected fallback for existing content.
`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/docs/react-reference.html#transitions)
231
230
232
231
#### useSyncExternalStore
233
232
234
-
`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React.
233
+
`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/docs/hooks-reference.html#usesyncexternalstore).
> `useSyncExternalStore` is intended to be used by libraries, not application code.
237
238
238
239
#### useInsertionEffect
240
+
241
+
`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/docs/hooks-reference.html#useinsertioneffect).
239
242
240
-
`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.
0 commit comments