Skip to content

Commit

Permalink
[18] Update APIs and links
Browse files Browse the repository at this point in the history
  • Loading branch information
rickhanlonii committed Mar 29, 2022
1 parent 52b5e67 commit 3d3ccaf
Showing 1 changed file with 27 additions and 24 deletions.
51 changes: 27 additions & 24 deletions content/blog/2022-03-29-react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,26 +159,27 @@ For more, see the RFC for [Suspense in React 18](https://github.com/reactjs/rfcs

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.

On the client, these APIs are:
#### React DOM Client

* `react-dom/client`
* `createRoot`
* `hydrateRoot`
* `react-dom/server`
* `renderToPipeableStream` (Node.js)
* `renderToReadableStream` (Web Streams)
These new APIs are now exported from `react-dom/client`:

Additionally, we’ve added limited support for Suspense to:
* `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.
* `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.

* `renderToString`
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.

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

* `renderToNodeStream`
#### React DOM Server

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.
These new APIs are now exported from `react-dom/server` and have full support for streaming Suspense on the server:

[See docs for React DOM Server here](/docs/react-dom-server.html#overview).
* `renderToPipeableStream`: for streaming in Node environments.
* `renderToReadableStream`: for modern edge runtime environments, such as Deno and Cloudflare workers.

The existing `renderToString` method keeps working but is discouraged.

[See docs for React DOM Server here](/docs/react-dom-server.html).

### New Strict Mode Behaviors

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

#### useId

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

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

#### useDeferredValue

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

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

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

#### useSyncExternalStore

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

[See docs here](/docs/hooks-reference.html#usesyncexternalstore).
> Note
>
> `useSyncExternalStore` is intended to be used by libraries, not application code.
#### useInsertionEffect

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

`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).
> Note
>
> `useInsertionEffect` is intended to be used by libraries, not application code.
## Changelog

Expand Down

0 comments on commit 3d3ccaf

Please sign in to comment.