[Chore][maintenance] upgrade several deps | use react 18 #2404

docs/package.json

@@ -4,7 +4,6 @@
     "@manaflair/redux-batch": "^1.0.0",
     "@types/nanoid": "^2.1.0",
     "@types/react": "^16.9.46",
-    "@types/react-redux": "^7.1.9",
     "@types/redux-logger": "^3.0.8",
     "async-mutex": "^0.3.2",
     "axios": "^0.20.0",

docs/rtk-query/usage/migrating-to-rtk-query.mdx

@@ -210,6 +210,8 @@ export const selectDataByName = (state: RootState, name: string) =>
   state.pokemon.dataByName[name]
 
 // file: src/store.ts noEmit
+import { useDispatch } from 'react-redux'
+import { EnhancedStore } from '@reduxjs/toolkit'
 interface Pokemon {}
 type RequestState = 'pending' | 'fulfilled' | 'rejected'
 
@@ -221,10 +223,14 @@ export type RootState = {
   pokemon: typeof initialPokemonSlice
 }
 
+export declare const store: EnhancedStore<RootState> 
+export type AppDispatch = typeof store.dispatch
+export declare const useAppDispatch: () => (...args: any[])=> any;
+
 // file: src/hooks.ts
 import { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from './store'
+import { useSelector } from 'react-redux'
+import { RootState, useAppDispatch } from './store'
 import {
   fetchPokemonByName,
   selectStatusByName,
@@ -233,7 +239,7 @@ import {
 
 // highlight-start
 export function useGetPokemonByNameQuery(name: string) {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   // select the current status from the store state for the provided name
   const status = useSelector((state: RootState) =>
     selectStatusByName(state, name)

examples/action-listener/counter/.env

@@ -1 +1,3 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+# https://github.com/facebook/create-react-app/issues/11940
+DISABLE_ESLINT_PLUGIN=true

examples/action-listener/counter/package.json

@@ -5,13 +5,13 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "clsx": "1.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "7.2.2",
-    "react-scripts": "4.0.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-redux": "^8.0.2",
+    "react-scripts": "5.0.1",
     "typescript": "~4.2.4"
   },
   "scripts": {
@@ -22,9 +22,11 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+      "react-app"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off"
+    }
   },
   "browserslist": {
     "production": [
@@ -37,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "jest-watch-typeahead": "^1.1.0"
   }
 }

examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx

@@ -1,5 +1,4 @@
-import { FormEvent } from 'react'
-import { ChangeEvent } from 'react-redux/node_modules/@types/react'
+import { FormEvent, ChangeEvent } from 'react'
 import { useAppDispatch, useAppSelector } from '../../store'
 import { themeActions, ThemeState } from '../../services/theme/slice'
 import styles from './changeThemeForm.module.css'

examples/action-listener/counter/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import './index.css'
 import { store } from './store'
 import { themeActions } from './services/theme/slice'
@@ -8,4 +8,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
   store.dispatch(themeActions.changeColorScheme('dark'))
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+
+root.render(<App />)

examples/query/react/advanced/.env

@@ -1 +1,2 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+DISABLE_ESLINT_PLUGIN=true

examples/query/react/advanced/package.json

@@ -7,15 +7,14 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.0-rc.1",
-    "react": "17.0.0",
-    "react-dom": "17.0.0",
-    "react-redux": "7.2.2",
-    "react-scripts": "4.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-redux": "^8.0.2",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-redux": "7.1.9",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.5",
     "typescript": "~4.2.4"
   },
   "eslintConfig": {

examples/query/react/advanced/src/index.tsx

@@ -1,13 +1,14 @@
-import { render } from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { ApiProvider } from '@reduxjs/toolkit/query/react'
-
 import App from './App'
 import { pokemonApi } from './services/pokemon'
 
 const rootElement = document.getElementById('root')
-render(
+
+const reactRoot = ReactDOM.createRoot(rootElement as HTMLElement)
+
+reactRoot.render(
   <ApiProvider api={pokemonApi}>
     <App />
-  </ApiProvider>,
-  rootElement
+  </ApiProvider>
 )

examples/query/react/authentication-with-extrareducers/.env

@@ -1 +1,3 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+# https://github.com/facebook/create-react-app/issues/11940
+DISABLE_ESLINT_PLUGIN=true

examples/query/react/authentication-with-extrareducers/package.json

@@ -12,18 +12,16 @@
     "@reduxjs/toolkit": "^1.6.0-rc.1",
     "framer-motion": "^2.9.5",
     "msw": "^0.41.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-icons": "3.11.0",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "5.2.0",
-    "react-scripts": "4.0.2"
+    "react-redux": "^8.0.2",
+    "react-router-dom": "6.3.0",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-redux": "7.1.9",
-    "@types/react-router-dom": "5.1.6",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.5",
     "typescript": "~4.2.4"
   },
   "scripts": {

examples/query/react/authentication-with-extrareducers/src/App.tsx

@@ -1,8 +1,8 @@
-import { Switch, Route } from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 import { Box, Center, VStack } from '@chakra-ui/react'
 
 import { Login } from './features/auth/Login'
-import { PrivateRoute } from './utils/PrivateRoute'
+import { PrivateOutlet } from './utils/PrivateOutlet'
 import { ProtectedComponent } from './features/auth/ProtectedComponent'
 
 function Hooray() {
@@ -21,12 +21,12 @@ function Hooray() {
 function App() {
   return (
     <Box>
-      <Switch>
-        <Route exact path="/login" component={Login} />
-        <PrivateRoute path="/">
-          <Hooray />
-        </PrivateRoute>
-      </Switch>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<PrivateOutlet />}>
+          <Route index element={<Hooray />} />
+        </Route>
+      </Routes>
     </Box>
   )
 }

examples/query/react/authentication-with-extrareducers/src/features/auth/Login.tsx

@@ -10,7 +10,7 @@ import {
   Box,
   useToast,
 } from '@chakra-ui/react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 
 import { ProtectedComponent } from './ProtectedComponent'
@@ -47,7 +47,7 @@ function PasswordInput({
 
 export const Login = () => {
   const dispatch = useDispatch()
-  const { push } = useHistory()
+  const navigate = useNavigate()
   const toast = useToast()
 
   const [formState, setFormState] = React.useState<LoginRequest>({
@@ -86,7 +86,7 @@ export const Login = () => {
               // Being that the result is handled in extraReducers in authSlice,
               // we know that we're authenticated after this, so the user
               // and token will be present in the store
-              push('/')
+              navigate('/')
             } catch (err) {
               toast({
                 status: 'error',

examples/query/react/authentication-with-extrareducers/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 
@@ -11,7 +11,7 @@ import { Provider } from 'react-redux'
 
 // Initialize the msw worker, wait for the service worker registration to resolve, then mount
 worker.start({ quiet: true }).then(() =>
-  ReactDOM.render(
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
       <Provider store={store}>
         <ChakraProvider>
@@ -20,7 +20,6 @@ worker.start({ quiet: true }).then(() =>
           </BrowserRouter>
         </ChakraProvider>
       </Provider>
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
   )
 )

examples/query/react/authentication-with-extrareducers/src/utils/PrivateOutlet.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
+
+export function PrivateOutlet() {
+  const auth = useAuth()
+  const location = useLocation()
+
+  return auth.user ? (
+    <Outlet />
+  ) : (
+    <Navigate to="/login" state={{ from: location }} />
+  )
+}

examples/query/react/authentication/.env

@@ -1 +1,3 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+# https://github.com/facebook/create-react-app/issues/11940
+DISABLE_ESLINT_PLUGIN=true

examples/query/react/authentication/package.json

@@ -12,18 +12,16 @@
     "@reduxjs/toolkit": "^1.6.0-rc.1",
     "framer-motion": "^2.9.5",
     "msw": "^0.41.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-icons": "3.11.0",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "5.2.0",
-    "react-scripts": "4.0.2"
+    "react-redux": "^8.0.2",
+    "react-router-dom": "6.3.0",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-redux": "7.1.9",
-    "@types/react-router-dom": "5.1.6",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.5",
     "typescript": "~4.2.4"
   },
   "scripts": {