chore(deps): update react monorepo to v18 (major) (#689)

* chore(deps): update react monorepo to v18

* fix: upgrade packages

* fix: correct tests

* docs: add notice

Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Emmanuel Chambon <[email protected]>

Author: 3 people

package.json

@@ -17,12 +17,12 @@
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "13.2.0",
     "@testing-library/react-hooks": "8.0.0",
     "@types/jest": "27.5.0",
     "@types/node": "17.0.31",
     "@types/prop-types": "15.7.5",
-    "@types/react": "17.0.45",
+    "@types/react": "18.0.9",
     "@types/react-dom": "18.0.3",
     "builtin-modules": "3.2.0",
     "cross-env": "7.0.3",
@@ -36,8 +36,8 @@
     "lint-staged": "12.4.1",
     "mockdate": "3.0.5",
     "prettier": "2.6.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "read-pkg": "7.1.0",
     "rollup": "2.71.1",
     "rollup-plugin-dts": "4.2.1",

packages/use-dataloader/package.json

@@ -28,6 +28,6 @@
     "prop-types": "15.8.1"
   },
   "peerDependencies": {
-    "react": "17.x"
+    "react": "17.x || 18.x"
   }
 }

packages/use-dataloader/src/__tests__/DataLoaderProvider.test.tsx

@@ -20,14 +20,14 @@ const wrapper = ({ children }: { children: ReactNode }) => (
   <DataLoaderProvider>{children}</DataLoaderProvider>
 )
 
-const wrapperWithCacheKey = ({ children }: { children?: React.ReactNode }) => (
+const wrapperWithCacheKey = ({ children }: { children?: ReactNode }) => (
   <DataLoaderProvider cacheKeyPrefix="sample">{children}</DataLoaderProvider>
 )
 
 const wrapperWith2ConcurrentRequests = ({
   children,
 }: {
-  children?: React.ReactNode
+  children?: ReactNode
 }) => (
   <DataLoaderProvider maxConcurrentRequests={2}>{children}</DataLoaderProvider>
 )

packages/use-dataloader/src/__tests__/useDataLoader.test.tsx

@@ -1,4 +1,5 @@
 import { act, renderHook } from '@testing-library/react-hooks'
+import { ReactNode } from 'react'
 import DataLoaderProvider, { useDataLoaderContext } from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR } from '../constants'
 import { PromiseType, UseDataLoaderConfig, UseDataLoaderResult } from '../types'
@@ -8,6 +9,7 @@ type UseDataLoaderHookProps = {
   config: UseDataLoaderConfig<unknown>
   key: string
   method: () => Promise<unknown>
+  children?: ReactNode
 }
 
 const PROMISE_TIMEOUT = 5
@@ -25,19 +27,17 @@ const initialProps = {
       }),
   ),
 }
-// eslint-disable-next-line react/prop-types
-const wrapper = ({ children }: { children?: React.ReactNode }) => (
+const wrapper = ({ children }: { children?: ReactNode }) => (
   <DataLoaderProvider>{children}</DataLoaderProvider>
 )
 
-const wrapperWithCacheKey = ({ children }: { children?: React.ReactNode }) => (
+const wrapperWithCacheKey = ({ children }: { children?: ReactNode }) => (
   <DataLoaderProvider cacheKeyPrefix="sample">{children}</DataLoaderProvider>
 )
 
 const wrapperWithOnError =
   (onError: (err: Error) => void) =>
-  // eslint-disable-next-line react/require-default-props
-  ({ children }: { children?: React.ReactNode }) =>
+  ({ children }: { children?: ReactNode }) =>
     <DataLoaderProvider onError={onError}>{children}</DataLoaderProvider>
 
 describe('useDataLoader', () => {

packages/use-dataloader/src/__tests__/usePaginatedDataLoader.test.tsx

@@ -1,5 +1,6 @@
 import { act } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
+import { ReactNode } from 'react'
 import DataLoaderProvider from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR } from '../constants'
 import {
@@ -13,6 +14,7 @@ type UseDataLoaderHookProps = {
   config: UsePaginatedDataLoaderConfig<unknown>
   key: string
   method: (params: UsePaginatedDataLoaderMethodParams) => Promise<unknown>
+  children?: ReactNode
 }
 
 const PROMISE_TIMEOUT = 5
@@ -30,7 +32,7 @@ const initialProps = {
   ),
 }
 // eslint-disable-next-line react/prop-types
-const wrapper = ({ children }: { children?: React.ReactNode }) => (
+const wrapper = ({ children }: { children?: ReactNode }) => (
   <DataLoaderProvider>{children}</DataLoaderProvider>
 )
 

packages/use-gtm/package.json

@@ -27,6 +27,6 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "react": "17.x"
+    "react": "17.x || 18.x"
   }
 }

packages/use-i18n/package.json

@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "date-fns": "2.x",
-    "react": "17.x",
-    "react-dom": "17.x"
+    "react": "17.x || 18.x",
+    "react-dom": "17.x || 18.x"
   }
 }

packages/use-i18n/src/__tests__/usei18n.tsx

@@ -1,5 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import mockdate from 'mockdate'
+import { ReactNode } from 'react'
 import I18n, { useI18n, useTranslation } from '..'
 import en from './locales/en.json'
 import es from './locales/es.json'
@@ -20,7 +21,7 @@ const wrapper =
     localeItemStorage = LOCALE_ITEM_STORAGE,
     supportedLocales = ['en', 'fr', 'es'],
   } = {}) =>
-  ({ children }: { children: React.ReactNode }) =>
+  ({ children }: { children: ReactNode }) =>
     (
       <I18n
         loadDateLocale={loadDateLocale}
@@ -45,7 +46,7 @@ describe('i18n hook', () => {
 
   it('useTranslation should not be defined without I18nProvider', () => {
     const { result } = renderHook(() => useTranslation(), {
-      wrapper: ({ children }) => <div>{children}</div>,
+      wrapper: ({ children }: { children: ReactNode }) => <div>{children}</div>,
     })
     expect(() => {
       expect(result.current).toBe(undefined)
@@ -54,7 +55,7 @@ describe('i18n hook', () => {
 
   it('useI18n should not be defined without I18nProvider', () => {
     const { result } = renderHook(() => useI18n(), {
-      wrapper: ({ children }) => <div>{children}</div>,
+      wrapper: ({ children }: { children: ReactNode }) => <div>{children}</div>,
     })
     expect(() => {
       expect(result.current).toBe(undefined)

packages/use-i18n/src/usei18n.tsx

@@ -218,6 +218,8 @@ const I18nContextProvider = ({
       const preparedValues = prefix ? prefixKeys(`${prefix}.`)(values) : values
 
       // avoid a lot of render when async update
+      // This is handled automatically in react 18, but we leave it here for compat
+      // https://github.com/reactwg/react-18/discussions/21#discussioncomment-801703
       ReactDOM.unstable_batchedUpdates(() => {
         setTranslations(prevState => ({
           ...prevState,

packages/use-query-params/package.json

@@ -32,13 +32,13 @@
     "query-string": "7.1.1"
   },
   "peerDependencies": {
-    "react": "17.x",
-    "react-dom": "17.x",
+    "react": "17.x || 18.x",
+    "react-dom": "17.x || 18.x",
     "react-router-dom": "^6.0.0"
   },
   "devDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-router-dom": "6.3.0"
   }
 }