[v8] Prototype: Investigate migrating to useMutableSource

[markerikson]

Background: #1740

Now that we have the TypeScript port mostly complete, we can at least start thinking about React 18 compatibility changes.

Most likely we will want to convert our current subscription and change detection logic to use the new React useMutableSource hook instead.

As of [email protected], useMutableSource does appear to be in the current React alpha versions.

I'd like to see some experimental PRs filed that try to switch over to useMutableSource, so we can at least see what sort of changes are needed, and begin to get a sense of what this means for performance. Any PRs should be done against the typescript-port branch as a starting point - we'll hopefully be merging that into master in the near future.

We should probably start with useSelector first, as that's simpler. After that we can look at updating connect as well.

For details on useMutableSource and how it works, see the RFC and PR that added it, as well as some of the discussions on things like "tearing" in the React 18 Working Group:

• useMutableSource reactjs/rfcs#147
• useMutableSource hook facebook/react#18000
• What is tearing? reactwg/react-18#69

There are a few examples of using it, including a couple examples by Daishi Kato of doing Redux subscriptions. Some examples that I've found:

• https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-rendering/blob/master/src/redux-use-mutable-source/index.js
• https://github.com/dai-shi/reactive-react-redux/blob/master/src/useSelector.ts
• https://souporserious.com/managing-indexed-collections-with-usemutablesource/
• https://github.com/jamesknelson/retil/blob/3028dcd4db/packages/retil-source/src/hooks/useSourceModern.ts
• Others: https://github.com/search?l=TypeScript&p=2&q=usemutablesource+NOT+Facebook+NOT+useOpaqueIdentifier&type=Code

[wurstbonbon]

Here is a little experiment to get things started #1792

[markerikson]

Superseded by useSyncExternalStore, and accomplished in #1808 .