Migrate to React 19

.github/workflows/tests.yml

@@ -62,13 +62,27 @@ jobs:
           path: packages/toolkit/package.tgz
 
   test-dist:
-    name: Test against dist
+    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
@@ -82,17 +96,23 @@ jobs:
       - name: Install deps
         run: yarn install
 
-      - uses: actions/download-artifact@v4
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
         with:
           name: package
           path: packages/toolkit
 
-      - run: ls -lah
+      - name: Check folder contents
+        run: ls -lah
+
+      - name: Install React ${{ matrix.react.version }} and React-DOM ${{ matrix.react.react-dom.version }}
+        run: yarn up 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 workspace @reduxjs/toolkit add $(pwd)/package.tgz
 
-      - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json
+      - name: Erase path aliases
+        run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json
 
       - name: Run tests, against dist
         env:
@@ -103,7 +123,7 @@ jobs:
         run: rm -rf dist && yarn tsc -p . --moduleResolution Bundler --module ESNext --noEmit false --declaration --emitDeclarationOnly --outDir dist --target ESNext && rm -rf dist
 
   test-types:
-    name: 'Test Types: TS ${{ matrix.ts }}'
+    name: 'Test Types: TS ${{ matrix.ts }} and React ${{ matrix.react.version }}'
 
     needs: [build]
     runs-on: ubuntu-latest
@@ -112,6 +132,20 @@ 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
         uses: actions/checkout@v4
@@ -125,6 +159,9 @@ jobs:
       - name: Install deps
         run: yarn install
 
+      - name: Install React ${{ matrix.react.version }} and React-DOM ${{ matrix.react.react-dom.version }}
+        run: yarn up 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 }}
 
@@ -139,7 +176,8 @@ jobs:
       - name: Show installed RTK versions
         run: yarn info @reduxjs/toolkit
 
-      - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json
+      - name: Erase path aliases
+        run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json
 
       - name: Test types
         env:

docs/package.json

@@ -3,7 +3,7 @@
   "devDependencies": {
     "@manaflair/redux-batch": "^1.0.0",
     "@types/nanoid": "^2.1.0",
-    "@types/react": "^18.0",
+    "@types/react": "npm:types-react@rc",
     "async-mutex": "^0.3.2",
     "axios": "^0.20.0",
     "formik": "^2.1.5",

docs/tutorials/quick-start.mdx

@@ -84,21 +84,30 @@ export const store = configureStore({
 
 // file: index.tsx
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 // highlight-start
 import { store } from './app/store'
 import { Provider } from 'react-redux'
 // highlight-end
 
-ReactDOM.render(
-  // highlight-next-line
-  <Provider store={store}>
-    <App />
-  </Provider>,
-  document.getElementById('root')
-)
+const container = document.getElementById('root')
+
+if (container) {
+  const root = createRoot(container)
+
+  root.render(
+    // highlight-next-line
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  )
+} else {
+  throw new Error(
+    "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.",
+  )
+}
 ```
 
 ### Create a Redux State Slice
@@ -214,18 +223,27 @@ export type RootState = ReturnType<typeof store.getState>
 
 // file: index.tsx noEmit
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Counter } from './features/counter/Counter'
 import { store } from './app/store'
 import { Provider } from 'react-redux'
 
-ReactDOM.render(
-  // highlight-next-line
-  <Provider store={store}>
-    <Counter />
-  </Provider>,
-  document.getElementById('root')
-)
+const container = document.getElementById('root')
+
+if (container) {
+  const root = createRoot(container)
+
+  root.render(
+    // highlight-next-line
+    <Provider store={store}>
+      <Counter />
+    </Provider>,
+  )
+} else {
+  throw new Error(
+    "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.",
+  )
+}
 
 // file: features/counter/Counter.tsx
 import React from 'react'

docs/tutorials/rtk-query.mdx

@@ -149,20 +149,28 @@ export const store = configureStore({
 })
 
 // file: index.tsx
-import * as React from 'react'
-import { render } from 'react-dom'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 
 import App from './App'
 import { store } from './store'
 
-const rootElement = document.getElementById('root')
-render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
-  rootElement
-)
+const container = document.getElementById('root')
+
+if (container) {
+  const root = createRoot(container)
+
+  root.render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  )
+} else {
+  throw new Error(
+    "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.",
+  )
+}
 ```
 
 ## Use the query in a component

docs/usage/nextjs.mdx

@@ -181,7 +181,7 @@ export default function StoreProvider({
   children: React.ReactNode
 }) {
   // highlight-start
-  const storeRef = useRef<AppStore>()
+  const storeRef = useRef<AppStore>(undefined)
   if (!storeRef.current) {
     // Create the store instance the first time this renders
     storeRef.current = makeStore()

docs/usage/usage-guide.md

@@ -1041,6 +1041,7 @@ configureStore({
 If using Redux-Persist, you should specifically ignore all the action types it dispatches:
 
 ```jsx
+import { createRoot } from 'react-dom/client'
 import { configureStore } from '@reduxjs/toolkit'
 import {
   persistStore,
@@ -1078,14 +1079,23 @@ const store = configureStore({
 
 let persistor = persistStore(store)
 
-ReactDOM.render(
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <App />
-    </PersistGate>
-  </Provider>,
-  document.getElementById('root'),
-)
+const container = document.getElementById('root')
+
+if (container) {
+  const root = createRoot(container)
+
+  root.render(
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
+    </Provider>,
+  )
+} else {
+  throw new Error(
+    "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.",
+  )
+}
 ```
 
 Additionally, you can purge any persisted state by adding an extra reducer to the specific slice that you would like to clear when calling persistor.purge(). This is especially helpful when you are looking to clear persisted state on a dispatched logout action.

examples/action-listener/counter/package.json

@@ -5,12 +5,12 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "clsx": "1.1.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-redux": "^9.1.0",
+    "react": "19.0.0-rc-f65ac7bd-20240826",
+    "react-dom": "19.0.0-rc-f65ac7bd-20240826",
+    "react-redux": "^9.1.2",
     "react-scripts": "5.0.1",
     "typescript": "~4.9"
   },