Migrate to React 19

.github/workflows/test.yml

@@ -38,7 +38,7 @@ jobs:
           path: ./package.tgz
 
   test-types:
-    name: Test Types with TypeScript ${{ matrix.ts }}
+    name: Test Types with TypeScript ${{ matrix.ts }} and React ${{ matrix.react.version }}
 
     needs: [build]
     runs-on: ubuntu-latest
@@ -47,6 +47,19 @@ jobs:
       matrix:
         node: ['20.x']
         ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2', '5.3', '5.4', '5.5']
+        react:
+          [
+            {
+              version: '^18',
+              types: ^18,
+              react-dom: { version: '^18', types: '^18' },
+            },
+            {
+              version: 'rc',
+              types: 'npm:types-react@rc',
+              react-dom: { version: 'rc', types: 'npm:types-react-dom@rc' },
+            },
+          ]
 
     steps:
       - name: Checkout repo
@@ -67,6 +80,9 @@ jobs:
       - name: Install deps
         run: yarn install
 
+      - name: Install React ${{ matrix.react.version }} and React-DOM ${{ matrix.react.react-dom.version }}
+        run: yarn add -D react@${{ matrix.react.version }} react-dom@${{ matrix.react.react-dom.version }} @types/react@${{ matrix.react.types }} @types/react-dom@${{ matrix.react.react-dom.types }}
+
       - name: Install TypeScript ${{ matrix.ts }}
         run: yarn add typescript@${{ matrix.ts }}
 
@@ -230,13 +246,27 @@ jobs:
         run: yarn build
 
   test-dist:
-    name: Run local tests against build artifact
+    name: Run local tests against build artifact (React ${{ matrix.react.version }})
     needs: [build]
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
         node: ['20.x']
+        react:
+          [
+            {
+              version: '^18',
+              types: ^18,
+              react-dom: { version: '^18', types: '^18' },
+            },
+            {
+              version: 'rc',
+              types: 'npm:types-react@rc',
+              react-dom: { version: 'rc', types: 'npm:types-react-dom@rc' },
+            },
+          ]
+
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -259,6 +289,9 @@ jobs:
       - name: Check folder contents
         run: ls -lah
 
+      - name: Install React ${{ matrix.react.version }} and React-DOM ${{ matrix.react.react-dom.version }}
+        run: yarn add -D react@${{ matrix.react.version }} react-dom@${{ matrix.react.react-dom.version }} @types/react@${{ matrix.react.types }} @types/react-dom@${{ matrix.react.react-dom.types }}
+
       - name: Install build artifact
         run: yarn add ./package.tgz
 

package.json

@@ -50,8 +50,8 @@
     "coverage": "codecov"
   },
   "peerDependencies": {
-    "@types/react": "^18.2.25",
-    "react": "^18.0",
+    "@types/react": "^18.2.25 || ^19",
+    "react": "^18.0 || ^19",
     "redux": "^5.0.0"
   },
   "peerDependenciesMeta": {
@@ -63,8 +63,8 @@
     }
   },
   "dependencies": {
-    "@types/use-sync-external-store": "^0.0.6",
-    "use-sync-external-store": "^1.2.2"
+    "@types/use-sync-external-store": "npm:types-use-sync-external-store@^19.0.0-rc",
+    "use-sync-external-store": "^1.2.2 || ^1.4.0-rc"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.7",
@@ -79,13 +79,13 @@
     "@babel/preset-typescript": "^7.24.7",
     "@microsoft/api-extractor": "^7.47.0",
     "@reduxjs/toolkit": "^2.2.5",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.14.2",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@^19.0.0-rc",
+    "@types/react-dom": "npm:types-react-dom@^19.0.0-rc",
     "babel-eslint": "^10.1.0",
     "codecov": "^3.8.3",
     "cross-env": "^7.0.3",
@@ -95,11 +95,10 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.2",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-test-renderer": "18.3.1",
+    "react": "^19.0.0-rc",
+    "react-dom": "^19.0.0-rc",
     "redux": "^5.0.1",
     "rimraf": "^5.0.7",
     "tsup": "7.0.0",

src/utils/hoistStatics.ts

@@ -6,7 +6,11 @@
  * Copyright 2015, Yahoo! Inc.
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
-import type * as React from 'react'
+import type {
+  ComponentType,
+  ForwardRefExoticComponent,
+  MemoExoticComponent,
+} from 'react'
 import { ForwardRef, Memo, isMemo } from '../utils/react-is'
 
 const REACT_STATICS = {
@@ -66,16 +70,16 @@ function getStatics(component: any) {
 }
 
 export type NonReactStatics<
-  S extends React.ComponentType<any>,
+  S extends ComponentType<any>,
   C extends {
     [key: string]: true
   } = {},
 > = {
   [key in Exclude<
     keyof S,
-    S extends React.MemoExoticComponent<any>
+    S extends MemoExoticComponent<any>
       ? keyof typeof MEMO_STATICS | keyof C
-      : S extends React.ForwardRefExoticComponent<any>
+      : S extends ForwardRefExoticComponent<any>
         ? keyof typeof FORWARD_REF_STATICS | keyof C
         : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C
   >]: S[key]
@@ -89,8 +93,8 @@ const getPrototypeOf = Object.getPrototypeOf
 const objectPrototype = Object.prototype
 
 export default function hoistNonReactStatics<
-  T extends React.ComponentType<any>,
-  S extends React.ComponentType<any>,
+  T extends ComponentType<any>,
+  S extends ComponentType<any>,
   C extends {
     [key: string]: true
   } = {},

src/utils/react-is.ts

@@ -1,111 +1,95 @@
 import type { ElementType, MemoExoticComponent, ReactElement } from 'react'
+import * as React from 'react'
 
 // Directly ported from:
-// https://unpkg.com/browse/react-is@18.3.0-canary-ee68446ff-20231115/cjs/react-is.production.js
+// https://unpkg.com/browse/react-is@19.0.0-rc.0/cjs/react-is.production.js
 // It's very possible this could change in the future, but given that
 // we only use these in `connect`, this is a low priority.
 
-const REACT_ELEMENT_TYPE = Symbol.for('react.element')
-const REACT_PORTAL_TYPE = Symbol.for('react.portal')
-const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment')
-const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode')
-const REACT_PROFILER_TYPE = Symbol.for('react.profiler')
-const REACT_PROVIDER_TYPE = Symbol.for('react.provider')
-const REACT_CONTEXT_TYPE = Symbol.for('react.context')
-const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context')
-const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref')
-const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense')
-const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list')
-const REACT_MEMO_TYPE = Symbol.for('react.memo')
-const REACT_LAZY_TYPE = Symbol.for('react.lazy')
-const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen')
-const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference')
+export const IS_REACT_19 = /* @__PURE__ */ React.version.startsWith('19')
+
+const REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for(
+  IS_REACT_19 ? 'react.transitional.element' : 'react.element',
+)
+const REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for('react.portal')
+const REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for('react.fragment')
+const REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for('react.strict_mode')
+const REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for('react.profiler')
+const REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for('react.consumer')
+const REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for('react.context')
+const REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for('react.forward_ref')
+const REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for('react.suspense')
+const REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for(
+  'react.suspense_list',
+)
+const REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for('react.memo')
+const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for('react.lazy')
+const REACT_OFFSCREEN_TYPE = /* @__PURE__ */ Symbol.for('react.offscreen')
+const REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for(
+  'react.client.reference',
+)
 
 export const ForwardRef = REACT_FORWARD_REF_TYPE
 export const Memo = REACT_MEMO_TYPE
 
 export function isValidElementType(type: any): type is ElementType {
-  if (typeof type === 'string' || typeof type === 'function') {
-    return true
-  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-  if (
+  return typeof type === 'string' ||
+    typeof type === 'function' ||
     type === REACT_FRAGMENT_TYPE ||
     type === REACT_PROFILER_TYPE ||
     type === REACT_STRICT_MODE_TYPE ||
     type === REACT_SUSPENSE_TYPE ||
     type === REACT_SUSPENSE_LIST_TYPE ||
-    type === REACT_OFFSCREEN_TYPE
-  ) {
-    return true
-  }
-
-  if (typeof type === 'object' && type !== null) {
-    if (
-      type.$$typeof === REACT_LAZY_TYPE ||
-      type.$$typeof === REACT_MEMO_TYPE ||
-      type.$$typeof === REACT_PROVIDER_TYPE ||
-      type.$$typeof === REACT_CONTEXT_TYPE ||
-      type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
-      // types supported by any Flight configuration anywhere since
-      // we don't know which Flight build this will end up being used
-      // with.
-      type.$$typeof === REACT_CLIENT_REFERENCE ||
-      type.getModuleId !== undefined
-    ) {
-      return true
-    }
-  }
-
-  return false
+    type === REACT_OFFSCREEN_TYPE ||
+    (typeof type === 'object' &&
+      type !== null &&
+      (type.$$typeof === REACT_LAZY_TYPE ||
+        type.$$typeof === REACT_MEMO_TYPE ||
+        type.$$typeof === REACT_CONTEXT_TYPE ||
+        type.$$typeof === REACT_CONSUMER_TYPE ||
+        type.$$typeof === REACT_FORWARD_REF_TYPE ||
+        type.$$typeof === REACT_CLIENT_REFERENCE ||
+        type.getModuleId !== undefined))
+    ? !0
+    : !1
 }
 
 function typeOf(object: any): symbol | undefined {
   if (typeof object === 'object' && object !== null) {
-    const $$typeof = object.$$typeof
+    const { $$typeof } = object
 
     switch ($$typeof) {
-      case REACT_ELEMENT_TYPE: {
-        const type = object.type
-
-        switch (type) {
+      case REACT_ELEMENT_TYPE:
+        switch (((object = object.type), object)) {
           case REACT_FRAGMENT_TYPE:
           case REACT_PROFILER_TYPE:
           case REACT_STRICT_MODE_TYPE:
           case REACT_SUSPENSE_TYPE:
           case REACT_SUSPENSE_LIST_TYPE:
-            return type
-
-          default: {
-            const $$typeofType = type && type.$$typeof
-
-            switch ($$typeofType) {
-              case REACT_SERVER_CONTEXT_TYPE:
+            return object
+          default:
+            switch (((object = object && object.$$typeof), object)) {
               case REACT_CONTEXT_TYPE:
               case REACT_FORWARD_REF_TYPE:
               case REACT_LAZY_TYPE:
               case REACT_MEMO_TYPE:
-              case REACT_PROVIDER_TYPE:
-                return $$typeofType
-
+                return object
+              case REACT_CONSUMER_TYPE:
+                return object
               default:
                 return $$typeof
             }
-          }
         }
-      }
-
-      case REACT_PORTAL_TYPE: {
+      case REACT_PORTAL_TYPE:
         return $$typeof
-      }
     }
   }
-
-  return undefined
 }
 
 export function isContextConsumer(object: any): object is ReactElement {
-  return typeOf(object) === REACT_CONTEXT_TYPE
+  return IS_REACT_19
+    ? typeOf(object) === REACT_CONSUMER_TYPE
+    : typeOf(object) === REACT_CONTEXT_TYPE
 }
 
 export function isMemo(object: any): object is MemoExoticComponent<any> {