@samitouri / QOS-React-2 / commits / e015e3d937

Added not about sync/batched root API being required

Brian Vaughn committed Aug 6, 2019 at 08:57 UTC e015e3d937ca21bf5e441f7af3f8b3d8b777b895
1 file changed +7 -1
packages/react-devtools-inline/README.md
+7 -1
@@ -38,7 +38,7 @@ activate();
38 ### `react-devtools-inline/frontend`
39
40 * **`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>.
42
43 ```js
44 import { initialize } from 'react-devtools-inline/frontend';
@@ -52,6 +52,8 @@ const contentWindow = iframe.contentWindow;
52 const DevTools = initialize(contentWindow);
53 ```
54
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 +
57 ## Examples
58
59 ### Configuring a same-origin `iframe`
@@ -82,6 +84,8 @@ initializeBackend(contentWindow);
84 const DevTools = initializeFrontend(contentWindow);
85
86 // <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.
89
90 // Let the backend know the frontend is ready and listening.
91 activateBackend(contentWindow);
@@ -124,6 +128,8 @@ const { contentWindow } = iframe;
128
129 // Initialize DevTools UI to listen to the iframe.
130 // 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.
133 const DevTools = initialize(contentWindow);
134
135 // Let the backend know to initialize itself.