Skip to content

Commit e015e3d

Browse files
author
Brian Vaughn
committed
Added not about sync/batched root API being required
1 parent 2349f04 commit e015e3d

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

packages/react-devtools-inline/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ activate();
3838
### `react-devtools-inline/frontend`
3939

4040
* **`initialize(contentWindow)`** -
41-
Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly.
41+
Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>2</sup>.
4242

4343
```js
4444
import { initialize } from 'react-devtools-inline/frontend';
@@ -52,6 +52,8 @@ const contentWindow = iframe.contentWindow;
5252
const DevTools = initialize(contentWindow);
5353
```
5454

55+
<sup>2</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. It should not be rendered with `ReactDOM.render`.
56+
5557
## Examples
5658

5759
### Configuring a same-origin `iframe`
@@ -82,6 +84,8 @@ initializeBackend(contentWindow);
8284
const DevTools = initializeFrontend(contentWindow);
8385

8486
// <DevTools /> interface can be rendered in the parent window at any time now...
87+
// Be sure to use either ReactDOM.unstable_createRoot()
88+
// or ReactDOM.unstable_createSyncRoot() to render this component.
8589

8690
// Let the backend know the frontend is ready and listening.
8791
activateBackend(contentWindow);
@@ -124,6 +128,8 @@ const { contentWindow } = iframe;
124128

125129
// Initialize DevTools UI to listen to the iframe.
126130
// This returns a React component we can render anywhere in the main window.
131+
// Be sure to use either ReactDOM.unstable_createRoot()
132+
// or ReactDOM.unstable_createSyncRoot() to render this component.
127133
const DevTools = initialize(contentWindow);
128134

129135
// Let the backend know to initialize itself.

0 commit comments

Comments
 (0)