Upgrade React to v18.2.0

[ryanclark]

This upgrades React to v18.2.0.

Most of this was type updates (adding PropsWithChildren everywhere) and the removal of @testing-library/react-hooks as it doesn't support React 18 (and @testing-library/react has renderHook anyway)

Breaking changes in v17 and v18:

• https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#other-breaking-changes
• https://react.dev/blog/2022/03/08/react-18-upgrade-guide

Closes #21098

[ravicious]

Wow, what a herculean effort.

I'll take a look on Monday, now I just submitted some quick improvements which should also help with any testing.

[ravicious]

First thing that caught my attention was some dupes of babel packages because of Yarn's innacurate dedupe algorithm.

I ran npx yarn-deduplicate yarn.lock --scopes @babel and made a bunch of other small changes on my branch if you'd like to include them (#35249).

Many of those operations require running yarn again for some weird reason, I suspect yarn just has some bugs which make it fundamentally unable to be idempotent when using workspaces. 🙄

[ravicious]

yarn install reports that packages like react-select now have an incorrect peer dependency, did you have a chance to check if those work correctly with React v18?

[ravicious]

TODO list for myself:

• Search bar in Connect and how it interacts with modals.
  • React v17 and earlier does not batch state updates when state is updated from an async function or from a native event listener. In React v18, all state updates should be batched.
    • https://javascript.plainenglish.io/batch-updates-in-react-17-or-earlier-versions-5f76d58e3af1
    • Get rid of unmounted component update in ResultList #26143
    • Connect: Show resource search errors in the search bar #24520 (comment)

[gzdunek]

Could you search for "react", "react-dom" and "@types/react" packages in all package.json and update their versions too? In some files the versions differ.

[ravicious]

Made it to web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/EnrollRdsDatabase.test.tsx, will continue tomorrow.

[gzdunek]

It looks like some changes weren't committed to yarn.lock, I see updates in it after running yarn install.

[gzdunek]

Thanks a lot for this!

[ravicious]

Connect works properly in dev and prod modes, Storybook works without problems as well.

🚀

[ravicious]

Do we keep this on master only? Ofc backporting would make any future work easier, but idk how much work a backport would take. With v15 just around the corner we might be able to get away with not backporting if we wish to.

[ryanclark]

Yeah I think it's best to keep it on just master, also means React 18 will go through the test plan before reaching customers

[ravicious]

eslint-plugin-jest-dom update (#35926) should get backported too if we backport this PR.