Require React 18

Author: alexeyr

CHANGELOG.md

@@ -29,8 +29,13 @@ See [Release Notes](docs/release-notes/15.0.0.md) for full details.
 - React Server Components Support (Pro Feature) [PR 1644](https://github.com/shakacode/react_on_rails/pull/1644) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
 - Improved component and store hydration performance [PR 1656](https://github.com/shakacode/react_on_rails/pull/1656) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
 
+#### Removed
+
+- Support for React 16 and 17. [PR 1710](https://github.com/shakacode/react_on_rails/pull/1710) by [alexeyr-ci](https://github.com/alexeyr-ci).
+
 #### 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/rails-webpacker-react-integration-options.md

@@ -84,6 +84,8 @@ const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptio
 module.exports = commonWebpackConfig;
 ```
 
+Note this can be removed after you upgrade to React 18+.
+
 ---
 
 ## HMR and React Hot Reloading

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,11 @@
-import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
-import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types';
+import type { Root } from 'react-dom/client';
+import type { RailsContext, RegisteredComponent, RenderFunction } 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 +89,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,
@@ -108,15 +106,12 @@ class ComponentRenderer {
 You returned a server side type of react-router error: ${JSON.stringify(reactElementOrRouterResult)}
 You should return a React.Component always for the client side entry point.`);
         } else {
-          const rootOrElement = reactHydrateOrRender(
+          this.root = reactHydrateOrRender(
             domNode,
             reactElementOrRouterResult as ReactElement,
             shouldHydrate,
           );
           this.state = 'rendered';
-          if (supportsRootApi) {
-            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

@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react';
+import type { Root } from 'react-dom/client';
 import * as ClientStartup from './clientStartup';
 import { renderOrHydrateComponent, hydrateStore } from './ClientSideRenderer';
 import ComponentRegistry from './ComponentRegistry';
@@ -10,7 +11,6 @@ import context from './context';
 import type {
   RegisteredComponent,
   RenderResult,
-  RenderReturnType,
   ReactComponentOrRenderFunction,
   AuthenticityHeaders,
   Store,
@@ -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,8 @@
 // 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 { Root } from 'react-dom/client';
 import type { Readable } from 'stream';
 
 // Don't import redux just for the type definitions
@@ -158,14 +159,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 */
@@ -175,7 +168,7 @@ export interface ReactOnRails {
   getOrWaitForStore(name: string): Promise<Store>;
   getOrWaitForStoreGenerator(name: string): Promise<StoreGenerator>;
   setOptions(newOptions: { traceTurbolinks: boolean }): void;
-  reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType;
+  reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): Root;
   reactOnRailsPageLoaded(): Promise<void>;
   reactOnRailsComponentLoaded(domId: string): void;
   reactOnRailsStoreLoaded(storeName: string): void;
@@ -185,7 +178,7 @@ export interface ReactOnRails {
   getStoreGenerator(name: string): StoreGenerator;
   setStore(name: string, store: Store): void;
   clearHydratedStores(): void;
-  render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): RenderReturnType;
+  render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): Root;
   getComponent(name: string): RegisteredComponent;
   getOrWaitForComponent(name: string): Promise<RegisteredComponent>;
   serverRenderReactComponent(options: RenderParams): null | string | Promise<RenderResult>;

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": [