Fix unstable_useBlocker key issues in strict mode

.changeset/blocker-key-strict-mode.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+Fix `unstable_useBlocker` key issues in `StrictMode`

package.json

@@ -112,10 +112,10 @@
       "none": "45 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "13.4 kB"
+      "none": "13.5 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "15.8 kB"
+      "none": "15.9 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
       "none": "12.1 kB"

packages/react-router/lib/hooks.tsx

@@ -22,6 +22,7 @@ import {
   matchRoutes,
   parsePath,
   resolveTo,
+  IDLE_BLOCKER,
   UNSAFE_getPathContributingMatches as getPathContributingMatches,
   UNSAFE_warning as warning,
 } from "@remix-run/router";
@@ -935,8 +936,9 @@ let blockerId = 0;
 export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker {
   let { router } = useDataRouterContext(DataRouterHook.UseBlocker);
   let state = useDataRouterState(DataRouterStateHook.UseBlocker);
-  let [blockerKey] = React.useState(() => String(++blockerId));
 
+  let [blockerKey, setBlockerKey] = React.useState("");
+  let [blocker, setBlocker] = React.useState<Blocker>(IDLE_BLOCKER);
   let blockerFunction = React.useCallback<BlockerFunction>(
     (args) => {
       return typeof shouldBlock === "function"
@@ -946,17 +948,16 @@ export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker {
     [shouldBlock]
   );
 
-  let blocker = router.getBlocker(blockerKey, blockerFunction);
+  React.useEffect(() => {
+    let key = String(++blockerId);
+    setBlocker(router.getBlocker(key, blockerFunction));
+    setBlockerKey(key);
+    return () => router.deleteBlocker(key);
+  }, [router, setBlocker, setBlockerKey, blockerFunction]);
 
-  // Cleanup on unmount
-  React.useEffect(
-    () => () => router.deleteBlocker(blockerKey),
-    [router, blockerKey]
-  );
-
-  // Prefer the blocker from state since DataRouterContext is memoized so this
-  // ensures we update on blocker state updates
-  return state.blockers.get(blockerKey) || blocker;
+  return blockerKey && state.blockers.has(blockerKey)
+    ? state.blockers.get(blockerKey)!
+    : blocker;
 }
 
 /**

packages/router/router.ts

@@ -893,8 +893,9 @@ export function createRouter(init: RouterInit): Router {
               init.history.go(delta);
             },
             reset() {
-              deleteBlocker(blockerKey!);
-              updateState({ blockers: new Map(router.state.blockers) });
+              let blockers = new Map(state.blockers);
+              blockers.set(blockerKey!, IDLE_BLOCKER);
+              updateState({ blockers });
             },
           });
           return;
@@ -991,9 +992,7 @@ export function createRouter(init: RouterInit): Router {
 
     // On a successful navigation we can assume we got through all blockers
     // so we can start fresh
-    for (let [key] of blockerFunctions) {
-      deleteBlocker(key);
-    }
+    blockerFunctions.clear();
 
     // Always respect the user flag.  Otherwise don't reset on mutation
     // submission navigations unless they redirect
@@ -1032,7 +1031,7 @@ export function createRouter(init: RouterInit): Router {
         newState.matches || state.matches
       ),
       preventScrollReset,
-      blockers: new Map(state.blockers),
+      blockers: new Map(),
     });
 
     // Reset stateful navigation vars
@@ -1130,8 +1129,10 @@ export function createRouter(init: RouterInit): Router {
           navigate(to, opts);
         },
         reset() {
-          deleteBlocker(blockerKey!);
-          updateState({ blockers: new Map(state.blockers) });
+          // TODO: Crate new map before mutating - same for fetchers if possible
+          let blockers = new Map(state.blockers);
+          blockers.set(blockerKey!, IDLE_BLOCKER);
+          updateState({ blockers });
         },
       });
       return;
@@ -2378,8 +2379,9 @@ export function createRouter(init: RouterInit): Router {
       `Invalid blocker state transition: ${blocker.state} -> ${newBlocker.state}`
     );
 
-    state.blockers.set(key, newBlocker);
-    updateState({ blockers: new Map(state.blockers) });
+    let blockers = new Map(state.blockers);
+    blockers.set(key, newBlocker);
+    updateState({ blockers });
   }
 
   function shouldBlockNavigation({