feat(react): Upgrade to React 18

[virtuoushub]

---

⚠️⚠️⚠️ 🚧 🏗️ 🚧 ⚠️⚠️⚠️

For RW application developers wanting to try out React 18

you don't need to wait for this PR to be merged in or released; to try out React 18 in your Redwood projects ✨right now✨:

1. Update web/package.json to bump React's version to 18: e.g. fix(deps): update react monorepo to v18 (major) example-storybook#12
2. Add custom web index web/src/index.js: e.g. https://github.com/redwoodjs/example-storybook/pull/144/files
   1. see also: https://redwoodjs.com/docs/cli-commands#setup-custom-web-index

import { hydrateRoot, createRoot } from 'react-dom/client'

import App from './App'
/**
 * 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
 */
const redwoodAppElement = document.getElementById('redwood-app')

if (redwoodAppElement.children?.length > 0) {
  hydrateRoot(redwoodAppElement, <App />)
} else {
  const root = createRoot(redwoodAppElement)
  root.render(<App />)
}

note: the example-storybook project is in JavaScript, so if your project uses TypeScript then you'll also want to bump the relevant React @types/* dependencies

also note: React 18 support in Redwood is currently experimental, so please try at your own risk

---

What was done in this PR

• upgraded to React 18.
  • explicitly define children prop - https://solverfox.dev/writing/no-implicit-children/
• removed usage of unstable_batchedUpdates

  • This API still exists in 18, but it isn't necessary anymore because batching happens automatically. We are not removing it in 18, although it might get removed in a future major version after popular libraries no longer depend on its existence.
    ( Automatic batching for fewer renders in React 18 reactwg/react-18#21 )

• updated @testing-library/react and removed usage of @testing-library/react-hooks since the functionality is moving into v13 ( https://github.com/testing-library/react-hooks-testing-library#a-note-about-react-18-support )
  • this means cleaning up packages/testing/src/web/customRender.tsx to account for new downstream dependency's API
    • note: there is breaking change here around prop order

- ): RenderHookResult<Props, Result> => {
+ ): RenderHookResult<Result, Props> => {

• updated babel configuration to fix tsc build error around TypeScript 'declare' fields
• kept docs React at 17 due to dependency on docusaurus which does not yet support 18 (see: Migrate to React 18 facebook/docusaurus#7264)

PR Notes

Redwood deps we need to have React 18 support before upgrading
(links to open Issue(s) if applicable)

• 🤷🏻

Redwood deps that require React 18

• react-testing-library@13+ ( https://github.com/testing-library/react-testing-library/blob/main/package.json#L63-L64 )
• Chakra 2

  • Version 2 of Chakra UI is only compatible with React 18. If you are still needing to use React 17 or earlier, please use version 1 of Chakra UI.

Redwood deps that are incompatible with React 18

• Docusarus note: this is only used in the docs and not the core code

Outstanding Goals (can be separate from this PR if it makes sense)

• Want to explore how best to accommodate pre react@18 usage, what a frictionless upgrade might be, and what a codemod(s?) might look like.
  • @jtoar to provide list of commands to smoke test, findings from that can inform what a "frictionless" upgrade might look like
• Explore how Cells might be updated / redesigned with Suspense out of scope for this PR

---

See also:

• https://github.com/reactjs/react-codemod
• Custom renderHook implementation for testing custom hooks #5381
• storybook
  • React: Add support for react18's new root API storybookjs/storybook#17215
    • Render React componentes with Concurrent Mode storybookjs/storybook#10543
    • Add support for React 18 storybookjs/storybook#17831
• Replacing render with createRoot reactwg/react-18#5 (comment)
• https://nx.dev/guides/react-18#react-18-migration

[netlify]

✅ Deploy Preview for redwoodjs-docs ready!

Name	Link
🔨 Latest commit	665037c
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62def502c7027a0008f351b1
😎 Deploy Preview	https://deploy-preview-4992--redwoodjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[thedavidprice]

@virtuoushub one important, helpful thing you could do in the OP is list the Redwood deps we need to have React 18 support before upgrading with link to open Issue if applicable. fwiw

[virtuoushub]

reopening, in case someone is interested in helping.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 665037c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

🟥 Failed Commands
cli run test --concurrency 2 -- --colors --maxWorkers 2
cli run test --concurrency 2 -- --colors --maxWorkers 2

✅ Successfully ran 9 targets

• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build

---

Sent with 💌 from NxCloud.

[standuprey]

Wouldn't this be an opportunity to upgrade to chakra 2? https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js#L31

[virtuoushub]

Wouldn't this be an opportunity to upgrade to chakra 2? https://github.com/redwoodjs/redwood/tree/main/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js#L31

Yes, although that upgrade will most likely happen in a different PR. Will add a note that it is a known dependency and that people interested in using it are waiting on this.

[jtoar]

Kind of feels like we shouldn't be pinning these in the CRWA template; let me see what that involves.