Upgrade React to v18 and R3F to v8

[axelboc]

The big change with React 18, obviously, is the createRoot API that replaces ReactDOM.render. In terms of code, this affects the demo but most importantly the Html component (I think the new API makes the code clearer, actually). In terms of performance, this means we can now opt-in to concurrent rendering features (see below). That being said, there should already be some performance improvements under the hood, especially since R3F already makes use of such features internally.

ALL FIXED There's a bunch of peer dependency warnings that should go away little by little, as usual, notably with Storybook, react-slider, react-reflex, etc. Talking about react-reflex, this library is affected by the breaking change in @types/react that consists in the removal of the implicit children prop from component types, like Component. So for instance, const ReflexContainer: React.Component<Props, any> is supposed to now be written as const ReflexContainer: React.Component<PropsWithChildren<Props>, any>. I've added @ts-expect-error comments for now. This is now fixed.

In R3F v8, the breaking change that affects our codebase is the sourceEvent key in event objects being renamed to nativeEvent.

Obviously there's a lot more to these major releases that we can benefit from or should watch out for (I will put this list in a discussion thread once merged):

• useTransition to improve the way we use Suspense (e.g. by not hiding the current slice while the next one is loading)
• useDeferredValue to improve performance on a case-by-case basis by deferring heavy, low-priority state updates
• changes to colour management in Three v0.139 (we're currently blocked at v0.135 due to a breaking change Update three.js to r141 #1170), thanks to a change in Three 0,139, we no longer have to set the linear prop on R3F's Canvas. I think we end up with fewer conversions of colours under the hood.
• updating the R3F camera manually on resize to (potentially) fix the pixel resizing issue 🎉
• using the attach API for declaring buffer attributes
• testing R3F components (the R3F test renderer has been available for a while, but it's worth keeping in mind)
• suspend-react, a lower-level library for Suspense than react-suspense-fetch; it's developed by the R3F team and used internally in R3F itself

[axelboc]

Attn @PeterC-DLS: I've just rebased this branch on v7. From now on, I'll try to rebase it only after stable releases.

I'm just doing a basic sanity check locally with pnpm start before force-pushing, and then the CI runs as usual—I'm not testing this branch in production projects yet—so do let me know if you notice issues.

[axelboc]

I've rebased and fixed a few things, but I had to skip a couple of tests for the CI to pass. I'll see if upgrading Testing Library helps and investigate a bit more.

The plan is to merge this and release a new major asap.

[axelboc]

/approve

[loichuder]

Looks all right to me.

Congrats for soldiering on through the timer issues. It should not have been easy.