Custom Wrapper
{children}
@@ -89,6 +89,7 @@ test('passes props to wrappers', async () => {
interface Props {
propOne: string
propTwo: string
+ children?: ReactNode
}
const PropWrapper: React.FC
= ({ children, propOne, propTwo }) => (
diff --git a/packages/router/src/active-route-loader.tsx b/packages/router/src/active-route-loader.tsx
index 20b2d4cd20dd..d2a6d2575a72 100644
--- a/packages/router/src/active-route-loader.tsx
+++ b/packages/router/src/active-route-loader.tsx
@@ -1,6 +1,10 @@
-import React, { useRef, useState, useEffect } from 'react'
-
-import { unstable_batchedUpdates } from 'react-dom'
+import React, {
+ useRef,
+ useState,
+ useEffect,
+ SetStateAction,
+ ReactNode,
+} from 'react'
import { getAnnouncement, getFocus, resetFocus } from './a11yUtils'
import {
@@ -97,19 +101,17 @@ export const ActiveRouteLoader = ({
// Consumers of the context can show a loading indicator
// to signal to the user that something is happening.
loadingTimeout.current = setTimeout(() => {
- unstable_batchedUpdates(() => {
- setLoadingState((loadingState) => ({
- ...loadingState,
- [path]: {
- page: whileLoadingPage || ArlWhileLoadingNullPage,
- specName: '',
- state: 'SHOW_LOADING',
- location,
- },
- }))
- setRenderedChildren(children)
- setRenderedPath(path)
- })
+ setLoadingState((loadingState) => ({
+ ...loadingState,
+ [path]: {
+ page: whileLoadingPage || ArlWhileLoadingNullPage,
+ specName: '',
+ state: 'SHOW_LOADING',
+ location,
+ },
+ }))
+ setRenderedChildren(children)
+ setRenderedPath(path)
}, delay)
// Wait to download and parse the page.
@@ -122,26 +124,25 @@ export const ActiveRouteLoader = ({
// Only update all state if we're still interested (i.e. we're still
// waiting for the page that just finished loading)
if (isMounted() && name === waitingFor.current) {
- unstable_batchedUpdates(() => {
- setLoadingState((loadingState) => ({
- ...loadingState,
- [path]: {
- page: module.default,
- specName: name,
- state: 'DONE',
- location,
- },
- }))
- // `children` could for example be a Set or a Route. Either way the
- // just-loaded page will be somewhere in the children tree. But
- // children could also be undefined, in which case we'll just render
- // the just-loaded page itself. For example, when we render the
- // NotFoundPage children will be undefined and the default export in
- // `module` will be the NotFoundPage itself.
- setRenderedChildren(children ?? module.default)
- setRenderedPath(path)
- setPageName(name)
- })
+ setLoadingState((loadingState) => ({
+ ...loadingState,
+ [path]: {
+ page: module.default,
+ specName: name,
+ state: 'DONE',
+ location,
+ },
+ }))
+ // `children` could for example be a Set or a Route. Either way the
+ // just-loaded page will be somewhere in the children tree. But
+ // children could also be undefined, in which case we'll just render
+ // the just-loaded page itself. For example, when we render the
+ // NotFoundPage children will be undefined and the default export in
+ // `module` will be the NotFoundPage itself.
+ const renderedChildren = children ?? module.default
+ setRenderedChildren(renderedChildren as SetStateAction) //FIXME: test this?
+ setRenderedPath(path)
+ setPageName(name)
}
}
@@ -149,32 +150,30 @@ export const ActiveRouteLoader = ({
clearLoadingTimeout()
startPageLoadTransition(spec, delay)
} else {
- unstable_batchedUpdates(() => {
- // Handle navigating to the same page again, but with different path
- // params (i.e. new `location` or route params)
- setLoadingState((loadingState) => {
- // If path is same, fetch the page again
- let existingPage = loadingState[path]?.page
- // If path is different, try to find the existing page
- if (!existingPage) {
- const pageState = Object.values(loadingState).find(
- (state) => state?.specName === spec.name
- )
- existingPage = pageState?.page
- }
- return {
- ...loadingState,
- [path]: {
- page: existingPage || ArlNullPage,
- specName: spec.name,
- state: 'DONE',
- location,
- },
- }
- })
- setRenderedChildren(children)
- setRenderedPath(path)
+ // Handle navigating to the same page again, but with different path
+ // params (i.e. new `location` or route params)
+ setLoadingState((loadingState) => {
+ // If path is same, fetch the page again
+ let existingPage = loadingState[path]?.page
+ // If path is different, try to find the existing page
+ if (!existingPage) {
+ const pageState = Object.values(loadingState).find(
+ (state) => state?.specName === spec.name
+ )
+ existingPage = pageState?.page
+ }
+ return {
+ ...loadingState,
+ [path]: {
+ page: existingPage || ArlNullPage,
+ specName: spec.name,
+ state: 'DONE',
+ location,
+ },
+ }
})
+ setRenderedChildren(children)
+ setRenderedPath(path)
}
return () => {
diff --git a/packages/router/src/location.tsx b/packages/router/src/location.tsx
index 9c734fbe7e2b..bccad5cdff37 100644
--- a/packages/router/src/location.tsx
+++ b/packages/router/src/location.tsx
@@ -25,6 +25,7 @@ class LocationProvider extends React.Component {
// When prerendering, there might be more than one level of location
// providers. Use the values from the one above.
static contextType = LocationContext
+ declare context: React.ContextType
HISTORY_LISTENER_ID: string | undefined = undefined
state = {
diff --git a/packages/testing/package.json b/packages/testing/package.json
index 507ed4c578af..5b53bf82bfe5 100644
--- a/packages/testing/package.json
+++ b/packages/testing/package.json
@@ -40,15 +40,14 @@
"@storybook/manager-webpack5": "6.5.15",
"@storybook/react": "6.5.15",
"@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
- "@testing-library/react-hooks": "8.0.1",
+ "@testing-library/react": "13.4.0",
"@testing-library/user-event": "14.4.3",
"@types/aws-lambda": "8.10.109",
"@types/babel-core": "6.25.7",
"@types/jest": "29.2.6",
"@types/node": "16.18.11",
- "@types/react": "17.0.53",
- "@types/react-dom": "17.0.18",
+ "@types/react": "18.0.27",
+ "@types/react-dom": "18.0.10",
"@types/webpack": "5.28.0",
"babel-jest": "29.3.1",
"babel-plugin-inline-react-svg": "2.0.1",
diff --git a/packages/testing/src/web/customRender.tsx b/packages/testing/src/web/customRender.tsx
index dbea63cf3842..f6d353a8fd55 100644
--- a/packages/testing/src/web/customRender.tsx
+++ b/packages/testing/src/web/customRender.tsx
@@ -1,19 +1,17 @@
import React from 'react'
-import { render } from '@testing-library/react'
-import type { RenderResult, RenderOptions } from '@testing-library/react'
+import { render, renderHook } from '@testing-library/react'
import type {
+ RenderResult,
+ RenderOptions,
RenderHookOptions,
RenderHookResult,
-} from '@testing-library/react-hooks'
-// `@testing-library/react-hooks` is being deprecated
-// since the functionality is moving into v13 of `@testing-library/react`.
-// But v13 of `@testing-library/react` drops support for React 17, so we can't upgrade just yet.
-// We can remove `@testing-library/react-hooks` after upgrading Redwood to React 18.
-import { renderHook } from '@testing-library/react-hooks/dom'
+} from '@testing-library/react'
import { MockProviders } from './MockProviders'
+export type CustomRenderHookOptions = RenderHookOptions
+
export const customRender = (
ui: React.ReactElement,
options: RenderOptions = {}
@@ -26,8 +24,8 @@ export const customRender = (
export const customRenderHook = (
render: (props: Props) => Result,
- options?: RenderHookOptions
-): RenderHookResult => {
+ options?: CustomRenderHookOptions
+): RenderHookResult => {
return renderHook(render, {
wrapper: (props: any) => ,
...options,
diff --git a/packages/web/package.json b/packages/web/package.json
index d74f1a01e92b..4d15f20230c6 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -51,22 +51,22 @@
"@babel/cli": "7.20.7",
"@babel/core": "7.20.12",
"@testing-library/jest-dom": "5.16.5",
- "@testing-library/react": "12.1.5",
+ "@testing-library/react": "13.4.0",
"@types/prop-types": "15.7.5",
- "@types/react": "17.0.53",
- "@types/react-dom": "17.0.18",
+ "@types/react": "18.0.27",
+ "@types/react-dom": "18.0.10",
"@types/testing-library__jest-dom": "5.14.5",
"jest": "29.3.1",
"nodemon": "2.0.20",
"prop-types": "15.8.1",
- "react": "17.0.2",
- "react-dom": "17.0.2",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
"typescript": "4.7.4"
},
"peerDependencies": {
"prop-types": "15.8.1",
- "react": "17.0.2",
- "react-dom": "17.0.2"
+ "react": "18.2.0",
+ "react-dom": "18.2.0"
},
"gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
}
diff --git a/packages/web/src/entry/index.js b/packages/web/src/entry/index.js
index 6837340bc6c1..e45fd3b19f35 100644
--- a/packages/web/src/entry/index.js
+++ b/packages/web/src/entry/index.js
@@ -1,16 +1,17 @@
-import ReactDOM from 'react-dom'
+import { hydrateRoot, createRoot } from 'react-dom/client'
import App from '~redwood-app-root'
/**
* When `#redwood-app` isn't empty then it's very likely that you're using
* prerendering. So React attaches event listeners to the existing markup
* rather than replacing it.
- * https://reactjs.org/docs/react-dom.html#hydrate
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
*/
-const rootElement = document.getElementById('redwood-app')
+const redwoodAppElement = document.getElementById('redwood-app')
-if (rootElement.children?.length > 0) {
- ReactDOM.hydrate(, rootElement)
+if (redwoodAppElement.children?.length > 0) {
+ hydrateRoot(redwoodAppElement, )
} else {
- ReactDOM.render(, rootElement)
+ const root = createRoot(redwoodAppElement)
+ root.render()
}
diff --git a/tasks/test-project/codemods/profilePage.js b/tasks/test-project/codemods/profilePage.js
index 9aba697730f7..3da4567fa0ca 100644
--- a/tasks/test-project/codemods/profilePage.js
+++ b/tasks/test-project/codemods/profilePage.js
@@ -18,14 +18,18 @@ return (