Require React 18

Author: alexeyr

CHANGELOG.md

@@ -31,6 +31,7 @@ See [Release Notes](docs/release-notes/15.0.0.md) for full details.
 
 #### Breaking Changes
 
+- React >=18 is now required
 - `ReactOnRails.reactOnRailsPageLoaded` is now an async function
 - `force_load` configuration now defaults to `true`
 - `defer_generated_component_packs` configuration now defaults to `false`

docs/guides/render-functions-and-railscontext.md

@@ -28,12 +28,13 @@ const MyAppComponent =
 
   // the props get passed again, but we ignore since we use a closure
   // or should we
-  () => (
-    <div>
-      <p>props are: {JSON.stringify(props)}</p>
-      <p>railsContext is: {JSON.stringify(railsContext)}</p>
-    </div>
-  );
+  () =>
+    (
+      <div>
+        <p>props are: {JSON.stringify(props)}</p>
+        <p>railsContext is: {JSON.stringify(railsContext)}</p>
+      </div>
+    );
 export default MyAppComponent;
 ```
 
@@ -147,7 +148,8 @@ const AppComponentWithRailsContext =
   (props, railsContext) =>
   // Create a React Function Component so you can
   // use the React Hooks API in this React Function Component
-  () => <AppComponent {...{ ...props, railsContext }} />;
+  () =>
+    <AppComponent {...{ ...props, railsContext }} />;
 export default AppComponentWithRailsContext;
 ```
 

docs/release-notes/15.0.0.md

@@ -23,6 +23,8 @@ Major improvements to component and store hydration:
 
 ## Breaking Changes
 
+Support for React 16 and 17 is dropped.
+
 ### Component Hydration Changes
 
 - The `defer_generated_component_packs` and `force_load` configurations now default to `false` and `true` respectively. This means components will hydrate early without waiting for the full page load. This improves performance by eliminating unnecessary delays in hydration.

node_package/src/ClientSideRenderer.ts

@@ -1,12 +1,10 @@
-import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types';
 
 import { getContextAndRailsContext, resetContextAndRailsContext, type Context } from './context';
 import createReactOutput from './createReactOutput';
 import { isServerRenderHash } from './isServerRenderResult';
 import reactHydrateOrRender from './reactHydrateOrRender';
-import { supportsRootApi } from './reactApis';
 import { debugTurbolinks } from './turbolinksUtils';
 
 const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
@@ -90,9 +88,8 @@ class ComponentRenderer {
           return;
         }
 
-        // Hydrate if available and was server rendered
-        // @ts-expect-error potentially present if React 18 or greater
-        const shouldHydrate = !!(ReactDOM.hydrate || ReactDOM.hydrateRoot) && !!domNode.innerHTML;
+        // Hydrate if the node was server rendered
+        const shouldHydrate = !!domNode.innerHTML;
 
         const reactElementOrRouterResult = createReactOutput({
           componentObj,
@@ -114,9 +111,7 @@ You should return a React.Component always for the client side entry point.`);
             shouldHydrate,
           );
           this.state = 'rendered';
-          if (supportsRootApi) {
-            this.root = rootOrElement as Root;
-          }
+          this.root = rootOrElement as Root;
         }
       }
     } catch (e: unknown) {
@@ -134,26 +129,8 @@ You should return a React.Component always for the client side entry point.`);
     }
     this.state = 'unmounted';
 
-    if (supportsRootApi) {
-      this.root?.unmount();
-      this.root = undefined;
-    } else {
-      const domNode = document.getElementById(this.domNodeId);
-      if (!domNode) {
-        return;
-      }
-
-      try {
-        ReactDOM.unmountComponentAtNode(domNode);
-      } catch (e: unknown) {
-        const error = e instanceof Error ? e : new Error('Unknown error');
-        console.info(
-          `Caught error calling unmountComponentAtNode: ${error.message} for domNode`,
-          domNode,
-          error,
-        );
-      }
-    }
+    this.root?.unmount();
+    this.root = undefined;
   }
 
   waitUntilRendered(): Promise<void> {

node_package/src/ReactOnRails.client.ts

@@ -10,13 +10,13 @@ import context from './context';
 import type {
   RegisteredComponent,
   RenderResult,
-  RenderReturnType,
   ReactComponentOrRenderFunction,
   AuthenticityHeaders,
   Store,
   StoreGenerator,
 } from './types';
 import reactHydrateOrRender from './reactHydrateOrRender';
+import { Root } from 'react-dom/client';
 
 const ctx = context();
 
@@ -103,13 +103,13 @@ ctx.ReactOnRails = {
   },
 
   /**
-   * Renders or hydrates the React element passed. In case React version is >=18 will use the root API.
+   * Renders or hydrates the React element passed.
    * @param domNode
    * @param reactElement
    * @param hydrate if true will perform hydration, if false will render
-   * @returns {Root|ReactComponent|ReactElement|null}
+   * @returns {Root}
    */
-  reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType {
+  reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): Root {
     return reactHydrateOrRender(domNode, reactElement, hydrate);
   },
 
@@ -222,26 +222,19 @@ ctx.ReactOnRails = {
    *
    * Does this:
    * ```js
-   * ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
-   *   document.getElementById('app'))
-   * ```
-   * under React 16/17 and
-   * ```js
    * const root = ReactDOMClient.createRoot(document.getElementById('app'))
-   * root.render(React.createElement(HelloWorldApp, {name: "Stranger"}))
+   * root.render(React.createElement(HelloWorldApp, {name: 'Stranger'}))
    * return root
    * ```
-   * under React 18+.
    *
    * @param name Name of your registered component
    * @param props Props to pass to your component
    * @param domNodeId
-   * @param hydrate Pass truthy to update server rendered html. Default is falsy
-   * @returns {Root|ReactComponent|ReactElement} Under React 18+: the created React root
+   * @param hydrate Pass truthy to update server rendered HTML. Default is falsy
+   * @returns {Root} The created React root
    *   (see "What is a root?" in https://github.com/reactwg/react-18/discussions/5).
-   *   Under React 16/17: Reference to your component's backing instance or `null` for stateless components.
    */
-  render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): RenderReturnType {
+  render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): Root {
     const componentObj = ComponentRegistry.get(name);
     const reactElement = createReactOutput({ componentObj, props, domNodeId });
 

node_package/src/reactApis.ts

@@ -1,47 +1,16 @@
 import type { ReactElement } from 'react';
-import * as ReactDOM from 'react-dom';
-import type { RenderReturnType } from './types';
-import { supportsRootApi } from './reactApis';
-
-type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
-
-// TODO: once React dependency is updated to >= 18, we can remove this and just
-// import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let reactDomClient: any;
-if (supportsRootApi) {
-  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
-  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
-  // Unfortunately, it only converts the error to a warning.
-  try {
-    // eslint-disable-next-line global-require,import/no-unresolved
-    reactDomClient = require('react-dom/client');
-  } catch (e) {
-    // We should never get here, but if we do, we'll just use the default ReactDOM
-    // and live with the warning.
-    reactDomClient = ReactDOM;
-  }
-}
-
-const reactHydrate: HydrateOrRenderType = supportsRootApi
-  ? reactDomClient.hydrateRoot
-  : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
-
-function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
-  if (supportsRootApi) {
-    const root = reactDomClient.createRoot(domNode);
-    root.render(reactElement);
-    return root;
-  }
-
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
-}
+import { createRoot, hydrateRoot, Root } from 'react-dom/client';
 
 export default function reactHydrateOrRender(
   domNode: Element,
   reactElement: ReactElement,
   hydrate: boolean,
-): RenderReturnType {
-  return hydrate ? reactHydrate(domNode, reactElement) : reactRender(domNode, reactElement);
+): Root {
+  if (hydrate) {
+    return hydrateRoot(domNode, reactElement);
+  }
+
+  const root = createRoot(domNode);
+  root.render(reactElement);
+  return root;
 }

node_package/src/reactHydrateOrRender.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line spaced-comment
 /// <reference types="react/experimental" />
 
-import type { ReactElement, ReactNode, Component, ComponentType } from 'react';
+import type { ReactElement, ComponentType } from 'react';
 import type { Readable } from 'stream';
 
 // Don't import redux just for the type definitions
@@ -158,14 +158,6 @@ export interface RenderResult {
   isShellReady?: boolean;
 }
 
-// from react-dom 18
-export interface Root {
-  render(children: ReactNode): void;
-  unmount(): void;
-}
-
-export type RenderReturnType = void | Element | Component | Root;
-
 export interface ReactOnRails {
   register(components: { [id: string]: ReactComponentOrRenderFunction }): void;
   /** @deprecated Use registerStoreGenerators instead */

node_package/src/types/index.ts

@@ -56,8 +56,8 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "react": ">= 16",
-    "react-dom": ">= 16",
+    "react": ">= 18",
+    "react-dom": ">= 18",
     "react-on-rails-rsc": "19.0.0"
   },
   "files": [

package.json

@@ -21,6 +21,10 @@ gsub_file_content("../package.json", %r{"@arethetypeswrong/cli": "[^"]*",}, "")
 gsub_file_content("../package.json", %r{"@testing-library/dom": "[^"]*",}, "")
 gsub_file_content("../package.json", %r{"@testing-library/react": "[^"]*",}, "")
 
+# Downgrade React
+gsub_file_content("../package.json", /"react": "[^"]*",/, '"react": "18.0.0",')
+gsub_file_content("../package.json", %r{"react/dom": "[^"]*",}, '"react-dom": "18.0.0",')
+
 gsub_file_content("../spec/dummy/package.json", '"shakapacker": "8.0.0",', '"shakapacker": "6.6.0",')
 
 gsub_file_content("../spec/dummy/config/webpack/commonWebpackConfig.js", /generateWebpackConfig(\(\))?/,

script/convert

@@ -3,8 +3,9 @@ import { StaticRouter } from 'react-router-dom';
 
 import routes from '../routes/routes';
 
-export default (props, railsContext) => () => (
-  <StaticRouter location={railsContext.location} {...props}>
-    {routes}
-  </StaticRouter>
-);
+export default (props, railsContext) => () =>
+  (
+    <StaticRouter location={railsContext.location} {...props}>
+      {routes}
+    </StaticRouter>
+  );