-
Notifications
You must be signed in to change notification settings - Fork 7.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[18] Update ReactDOMClient docs (#4468)
* [18] Update ReactDOMClient docs * Remove ReactDOMClient where it's obvious * Update browser message * Update browser message note * Update based on feedback * Add react-dom/client docs
- Loading branch information
1 parent
d37523e
commit 9081a48
Showing
4 changed files
with
132 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
--- | ||
id: react-dom-client | ||
title: ReactDOMClient | ||
layout: docs | ||
category: Reference | ||
permalink: docs/react-dom-client.html | ||
--- | ||
|
||
The `react-dom/client` package provides client-specific methods used for initializing an app on the client. Most of your components should not need to use this module. | ||
|
||
```js | ||
import * as ReactDOM from 'react-dom/client'; | ||
``` | ||
|
||
If you use ES5 with npm, you can write: | ||
|
||
```js | ||
var ReactDOM = require('react-dom/client'); | ||
``` | ||
|
||
## Overview {#overview} | ||
|
||
The following methods can be used in client environments: | ||
|
||
- [`createRoot()`](#createroot) | ||
- [`hydrateRoot()`](#hydrateroot) | ||
|
||
### Browser Support {#browser-support} | ||
|
||
React supports all modern browsers, although [some polyfills are required](/docs/javascript-environment-requirements.html) for older versions. | ||
|
||
> Note | ||
> | ||
> We do not support older browsers that don't support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page, but you're on your own if you choose to take this path. | ||
## Reference {#reference} | ||
|
||
### `createRoot()` {#createroot} | ||
|
||
```javascript | ||
createRoot(container[, options]); | ||
``` | ||
|
||
Create a React root for the supplied `container` and return the root. The root can be used to render a React element into the DOM with `render`: | ||
|
||
```javascript | ||
const root = createRoot(container); | ||
root.render(element); | ||
``` | ||
|
||
`createRoot` accepts two options: | ||
- `onRecoverableError`: optional callback called when React automatically recovers from errors. | ||
- `identifierPrefix`: optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server. | ||
|
||
The root can also be unmounted with `unmount`: | ||
|
||
```javascript | ||
root.unmount(); | ||
``` | ||
|
||
> Note: | ||
> | ||
> `createRoot()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when render is called. Later calls use React’s DOM diffing algorithm for efficient updates. | ||
> | ||
> `createRoot()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children. | ||
> | ||
> Using `createRoot()` to hydrate a server-rendered container is not supported. Use [`hydrateRoot()`](#hydrateroot) instead. | ||
* * * | ||
|
||
### `hydrateRoot()` {#hydrateroot} | ||
|
||
```javascript | ||
hydrateRoot(element, container[, options]) | ||
``` | ||
|
||
Same as [`createRoot()`](#createroot), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup. | ||
|
||
`hydrateRoot` accepts two options: | ||
- `onRecoverableError`: optional callback called when React automatically recovers from errors. | ||
- `identifierPrefix`: optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server. | ||
|
||
|
||
> Note | ||
> | ||
> React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters