Skip to content

Commit 3d3ccaf

Browse files
committed
[18] Update APIs and links
1 parent 52b5e67 commit 3d3ccaf

File tree

1 file changed

+27
-24
lines changed

1 file changed

+27
-24
lines changed

content/blog/2022-03-29-react-v18.md

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -159,26 +159,27 @@ For more, see the RFC for [Suspense in React 18](https://github.com/reactjs/rfcs
159159

160160
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.
161161

162-
On the client, these APIs are:
162+
#### React DOM Client
163163

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`:
170165

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.
172168

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.
174170

175-
And have deprecated:
171+
[See docs for React DOM Client here](/docs/react-dom-client.html).
176172

177-
* `renderToNodeStream`
173+
#### React DOM Server
178174

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:
180176

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).
182183

183184
### New Strict Mode Behaviors
184185

@@ -217,29 +218,31 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
217218

218219
#### useId
219220

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.
221-
222-
[See docs here](/docs/hooks-reference.html#useid).
221+
`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).
223222

224223
#### useDeferredValue
225224

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).
227226

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.
227+
#### useTransition
229228

230-
[See docs here](/docs/hooks-reference.html#usedeferredvalue).
229+
`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)
231230

232231
#### useSyncExternalStore
233232

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).
235234

236-
[See docs here](/docs/hooks-reference.html#usesyncexternalstore).
235+
> Note
236+
>
237+
> `useSyncExternalStore` is intended to be used by libraries, not application code.
237238
238239
#### 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).
239242

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.
241-
242-
[See docs here](/docs/hooks-reference.html#useinsertioneffect).
243+
> Note
244+
>
245+
> `useInsertionEffect` is intended to be used by libraries, not application code.
243246
244247
## Changelog
245248

0 commit comments

Comments
 (0)