Migrate docs to React 19

Author: aryaemami59

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.