React: Add support for react18's new root API

app/react/package.json

@@ -79,8 +79,8 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || >=17.0.0",
+    "react-dom": "^16.8.0 || >=17.0.0"
   },
   "peerDependenciesMeta": {
     "@babel/core": {

app/react/src/client/preview/render.tsx

@@ -15,6 +15,15 @@ import { ReactFramework } from './types-6-0';
 
 const { FRAMEWORK_OPTIONS } = global;
 
+// TODO: Remove IRoot declaration as soon as @types/react v17.x is used
+interface IRoot {
+  render(children: React.ReactChild | Iterable<React.ReactNode>): void;
+  unmount(): void;
+}
+
+// A map of all rendered React 18 nodes
+const nodes = new Map<Element, IRoot>();
+
 export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
@@ -28,9 +37,50 @@ export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
 
 const renderElement = async (node: ReactElement, el: Element) =>
   new Promise((resolve) => {
-    ReactDOM.render(node, el, () => resolve(null));
+    // Create Root Element conditionally for new React 18 Root Api
+    const root = getReactRoot(el);
+
+    if (root) {
+      root.render(node);
+      setTimeout(() => {
+        resolve(null);
+      }, 0);
+    } else {
+      ReactDOM.render(node, el, () => resolve(null));
+    }
   });
 
+const unmountElement = (el: Element) => {
+  const root = nodes.get(el);
+  if (root && FRAMEWORK_OPTIONS?.newRootApi) {
+    root.unmount();
+    nodes.delete(el);
+  } else {
+    ReactDOM.unmountComponentAtNode(el);
+  }
+};
+
+const getReactRoot = (el: Element): IRoot | null => {
+  if (!FRAMEWORK_OPTIONS?.newRootApi) {
+    return null;
+  }
+
+  if (!(ReactDOM as any).createRoot) {
+    throw new Error(
+      "Your React version doesn't support the new React Root Api. Please use react and react-dom in version 18.x or set the storybook feature 'newRootApi' to false"
+    );
+  }
+
+  let root = nodes.get(el);
+
+  if (!root) {
+    root = (ReactDOM as any).createRoot(el) as IRoot;
+    nodes.set(el, root);
+  }
+
+  return root;
+};
+
 class ErrorBoundary extends ReactComponent<{
   showException: (err: Error) => void;
   showMain: () => void;
@@ -92,7 +142,7 @@ export async function renderToDOM(
   // https://github.com/storybookjs/react-storybook/issues/81
   // (This is not the case when we change args or globals to the story however)
   if (forceRemount) {
-    ReactDOM.unmountComponentAtNode(domElement);
+    unmountElement(domElement);
   }
 
   await renderElement(element, domElement);

app/react/types/index.ts

@@ -7,5 +7,10 @@ export interface StorybookConfig extends BaseConfig {
   reactOptions?: {
     fastRefresh?: boolean;
     strictMode?: boolean;
+    /**
+     * Uses React 18's new root API (ReactDOM.createRoot)
+     * The new root API happens to be the gateway for accessing new features of React 18 and adds out-of-the-box improvements.
+     */
+    newRootApi?: boolean;
   };
 }

docs/faq.md

@@ -83,6 +83,26 @@ module.exports = {
 💡 Fast Refresh only works in development mode with React 16.10 or higher.
 </div>
 
+### How do I setup the new React Context Root API with Storybook?
+
+The new [React Root API](https://reactjs.org/docs/concurrent-mode-reference.html) which was introduced in React 18 is an opt-in feature that can be used in Storybook React.
+
+You can set the following properties in your `.storybook/main.js` files:
+
+```js
+module.exports = {
+  reactOptions: {
+    newRootApi: true,
+  },
+};
+```
+
+After enabling it, it is possible to use React's newest [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html).
+
+<div class="aside">
+💡 The new React Root API (React.createRoot) only works with React 18 and above.
+</div>
+
 ### Why is there no addons channel?
 
 A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
@@ -377,4 +397,4 @@ const StoryMeta: ComponentMeta<typeof Button> = {
 export default meta;
 ```
 
-Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.
+Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.

yarn.lock

@@ -8233,8 +8233,8 @@ __metadata:
     webpack: 4
   peerDependencies:
     "@babel/core": ^7.11.5
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || >=17.0.0
+    react-dom: ^16.8.0 || >=17.0.0
   peerDependenciesMeta:
     "@babel/core":
       optional: true