Remove useSyncExternalStore in favor of useState

[brophdawg11]

Sibling Remix PR: remix-run/remix#6121

Seems useSyncExternalStore wasn't the right solution all along, since it can cause updates to occur in unexpected orders. A minimal reproduction of the underlying issue is here: https://codesandbox.io/s/use-sync-external-store-loop-9g7b81

But basically when using useSyncExternalStore to sync some external state (as we were doing to sync the @remix-run/router state), the following does not work as one would expect. The externalStore.increment() causes state to update and re-run the effect prior to shouldIncrement=false being flushed, so we end up in an infinite loop.

React.useEffect(() => {
  if (shouldIncrement) {
    setShouldIncrement(false);
    externalStore.increment();
  }
}, [state, shouldIncrement]);

@jacob-ebey and I's hunch is that these "sync" updates are flushed synchronously and thus they go ahead of normal useState updates that run asynchronously in concurrent mode.

This is resolved by using local react state to "sync" the external state:

let [state, setState] = React.useState(
  externalStore.getState.bind(externalStore)
);
React.useEffect(() => {
  return externalStore.subscribe((newState) => {
    if (newState !== state) {
      setState(newState);
    }
  });
}, [state]);

This seems to be the recommendation in the react docs as well:

Closes: remix-run/remix#6072

[changeset-bot]

🦋 Changeset detected

Latest commit: f3fd217

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
react-router	Patch
react-router-dom	Patch
react-router-dom-v5-compat	Patch
react-router-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[brophdawg11]

Reusing the same window instance across these tests was. ... not smart on my part :)

[brophdawg11]

As a bonus we drop the use-sync-external-store/shim and shave a few bytes

[github-actions]

🤖 Hello there,

We just published version 6.11.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.11.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!