Update to adopt react router's removal of useSyncExternalStore

.changeset/remove-use-sync-external-store.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Update Remix for React Router no longer relying on `useSyncExternalStore`

package.json

@@ -84,7 +84,6 @@
     "@types/retry": "^0.12.0",
     "@types/semver": "^7.3.4",
     "@types/ssri": "^7.1.0",
-    "@types/use-sync-external-store": "^0.0.3",
     "@vanilla-extract/css": "^1.1.0",
     "abort-controller": "^3.0.0",
     "abortcontroller-polyfill": "^1.7.3",

packages/remix-react/browser.tsx

@@ -1,9 +1,7 @@
 import type { HydrationState, Router } from "@remix-run/router";
 import type { ReactElement } from "react";
 import * as React from "react";
-import type { Location } from "react-router-dom";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
 
 import { RemixContext } from "./components";
 import type { EntryContext, FutureConfig } from "./entry";
@@ -123,7 +121,8 @@ if (import.meta && import.meta.hot) {
           // TODO: Handle race conditions here. Should abort if a new update
           // comes in while we're waiting for the router to be idle.
           Object.assign(window.__remixManifest, newManifest);
-          window.$RefreshRuntime$.performReactRefresh();
+          // Ensure RouterProvider setState has flushed before re-rendering
+          setTimeout(() => window.$RefreshRuntime$.performReactRefresh(), 1);
         }
       });
       router.revalidate();
@@ -166,16 +165,20 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
     });
   }
 
+  let [location, setLocation] = React.useState(router.state.location);
+
+  React.useEffect(() => {
+    return router.subscribe((newState) => {
+      if (newState.location !== location) {
+        setLocation(newState.location);
+      }
+    });
+  }, [location]);
+
   // We need to include a wrapper RemixErrorBoundary here in case the root error
   // boundary also throws and we need to bubble up outside of the router entirely.
   // Then we need a stateful location here so the user can back-button navigate
   // out of there
-  let location: Location = useSyncExternalStore(
-    router.subscribe,
-    () => router.state.location,
-    () => router.state.location
-  );
-
   return (
     <RemixContext.Provider
       value={{

packages/remix-react/package.json

@@ -17,8 +17,7 @@
   "module": "dist/esm/index.js",
   "dependencies": {
     "@remix-run/router": "1.5.0",
-    "react-router-dom": "6.10.0",
-    "use-sync-external-store": "1.2.0"
+    "react-router-dom": "6.10.0"
   },
   "devDependencies": {
     "@remix-run/server-runtime": "1.15.0",

yarn.lock

@@ -3332,11 +3332,6 @@
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
-"@types/use-sync-external-store@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
-  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
-
 "@types/ws@^7.4.1":
   version "7.4.7"
   resolved "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz"
@@ -13181,11 +13176,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-sync-external-store@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"