@react-navigation/core 7.21.3 → 7.21.5

package/src/PreventRemoveProvider.tsx

@@ -13,13 +13,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-type PreventedRoutesMap = Map<
-  string,
-  {
-    routeKey: string;
-    preventRemove: boolean;
-  }
->;
+type PreventedRoutesMap = Map<string, string>;
 
 /**
  * Util function to transform map of prevented routes to a simpler object.
@@ -27,17 +21,11 @@ type PreventedRoutesMap = Map<
 const transformPreventedRoutes = (
   preventedRoutesMap: PreventedRoutesMap
 ): PreventedRoutes => {
-  const preventedRoutesToTransform = [...preventedRoutesMap.values()];
+  const preventedRoutes: PreventedRoutes = {};
 
-  const preventedRoutes = preventedRoutesToTransform.reduce<PreventedRoutes>(
-    (acc, { routeKey, preventRemove }) => {
-      acc[routeKey] = {
-        preventRemove: acc[routeKey]?.preventRemove || preventRemove,
-      };
-      return acc;
-    },
-    {}
-  );
+  for (const routeKey of preventedRoutesMap.values()) {
+    preventedRoutes[routeKey] = { preventRemove: true };
+  }
 
   return preventedRoutes;
 };
@@ -50,12 +38,15 @@ export function PreventRemoveProvider({ children }: Props) {
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(() => new Map());
 
+  const registry = React.useRef<PreventedRoutesMap>(new Map());
+
   const navigation = React.useContext(NavigationHelpersContext);
   const route = React.useContext(NavigationRouteContext);
 
   const preventRemoveContextValue = React.useContext(PreventRemoveContext);
   // take `setPreventRemove` from parent context - if exist it means we're in a nested context
   const setParentPrevented = preventRemoveContextValue?.setPreventRemove;
+  const notifyParentPrevented = preventRemoveContextValue?.notifyPreventRemove;
 
   const setPreventRemove = useLatestCallback(
     (id: string, routeKey: string, preventRemove: boolean): void => {
@@ -71,36 +62,49 @@ export function PreventRemoveProvider({ children }: Props) {
         );
       }
 
-      setPreventedRoutesMap((prevPrevented) => {
-        // values haven't changed - do nothing
-        if (
-          routeKey === prevPrevented.get(id)?.routeKey &&
-          preventRemove === prevPrevented.get(id)?.preventRemove
-        ) {
-          return prevPrevented;
-        }
-
-        const nextPrevented = new Map(prevPrevented);
-
-        if (preventRemove) {
-          nextPrevented.set(id, {
-            routeKey,
-            preventRemove,
-          });
-        } else {
-          nextPrevented.delete(id);
-        }
-
-        return nextPrevented;
-      });
+      if (preventRemove) {
+        registry.current.set(id, routeKey);
+      } else {
+        registry.current.delete(id);
+      }
     }
   );
 
-  const isPrevented = [...preventedRoutesMap.values()].some(
-    ({ preventRemove }) => preventRemove
-  );
+  const notifyPreventRemove = useLatestCallback(() => {
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    setPreventedRoutesMap((prevPrevented) => {
+      const nextPrevented = registry.current;
 
+      const hasChanged =
+        prevPrevented.size !== nextPrevented.size ||
+        [...nextPrevented].some(
+          ([id, routeKey]) => prevPrevented.get(id) !== routeKey
+        );
+
+      // values haven't changed - do nothing
+      if (!hasChanged) {
+        return prevPrevented;
+      }
+
+      return new Map(nextPrevented);
+    });
+  });
+
+  // Sync the state on every commit in case the registry was changed by a screen
+  // unmounting while hidden with `<Activity>`, where no passive effects run
+  // Also notify the parent so nested prevention propagates upwards
   React.useEffect(() => {
+    notifyPreventRemove();
+    notifyParentPrevented?.();
+
+    return () => {
+      notifyParentPrevented?.();
+    };
+  });
+
+  const isPrevented = preventedRoutesMap.size > 0;
+
+  React.useInsertionEffect(() => {
     if (route?.key !== undefined && setParentPrevented !== undefined) {
       // when route is defined (and setParentPrevented) it means we're in a nested stack
       // route.key then will be the route key of parent
@@ -116,9 +120,10 @@ export function PreventRemoveProvider({ children }: Props) {
   const value = React.useMemo(
     () => ({
       setPreventRemove,
+      notifyPreventRemove,
       preventedRoutes: transformPreventedRoutes(preventedRoutesMap),
     }),
-    [setPreventRemove, preventedRoutesMap]
+    [setPreventRemove, notifyPreventRemove, preventedRoutesMap]
   );
 
   return (

package/src/createNavigationContainerRef.tsx

@@ -29,6 +29,8 @@ export function createNavigationContainerRef<
 
   const listeners: Record<string, ((...args: any[]) => void)[]> = {};
 
+  let current: NavigationContainerRef<ParamList> | null = null;
+
   const removeListener = (
     event: string,
     callback: (...args: any[]) => void
@@ -36,9 +38,12 @@ export function createNavigationContainerRef<
     if (listeners[event]) {
       listeners[event] = listeners[event].filter((cb) => cb !== callback);
     }
-  };
 
-  let current: NavigationContainerRef<ParamList> | null = null;
+    current?.removeListener(
+      event as keyof NavigationContainerEventMap,
+      callback
+    );
+  };
 
   const ref: NavigationContainerRefWithCurrent<ParamList> = {
     get current() {
@@ -67,7 +72,11 @@ export function createNavigationContainerRef<
     },
     ...methods.reduce<any>((acc, name) => {
       acc[name] = (...args: any[]) => {
-        if (current == null) {
+        if (name === 'removeListener') {
+          const [event, callback] = args;
+
+          removeListener(event, callback);
+        } else if (current == null) {
           switch (name) {
             case 'addListener': {
               const [event, callback] = args;
@@ -77,12 +86,6 @@ export function createNavigationContainerRef<
 
               return () => removeListener(event, callback);
             }
-            case 'removeListener': {
-              const [event, callback] = args;
-
-              removeListener(event, callback);
-              break;
-            }
             default:
               console.error(NOT_INITIALIZED_ERROR);
           }

package/src/useEventEmitter.tsx

@@ -19,7 +19,7 @@ export function useEventEmitter<T extends Record<string, any>>(
   const listenRef = React.useRef(listen);
   const onPostEmitRef = React.useRef(onPostEmit);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     listenRef.current = listen;
     onPostEmitRef.current = onPostEmit;
   });

package/src/useKeyedChildListeners.tsx

@@ -28,8 +28,10 @@ export function useKeyedChildListeners() {
       keyedListeners[type][key] = listener;
 
       return () => {
-        // @ts-expect-error: according to ref stated above you can use `key` to index type
-        keyedListeners[type][key] = undefined;
+        if (keyedListeners[type][key] === listener) {
+          // @ts-expect-error: according to ref stated above you can use `key` to index type
+          keyedListeners[type][key] = undefined;
+        }
       };
     },
     [keyedListeners]

package/src/useNavigationBuilder.tsx

@@ -37,7 +37,6 @@ import {
 } from './types';
 import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
-import { useClientLayoutEffect } from './useClientLayoutEffect';
 import { useComponent } from './useComponent';
 import { useCurrentRender } from './useCurrentRender';
 import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
@@ -588,7 +587,7 @@ export function useNavigationBuilder<
 
   const previousRouteKeyListRef = React.useRef(routeKeyList);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     previousRouteKeyListRef.current = routeKeyList;
   });
 
@@ -794,19 +793,6 @@ export function useNavigationBuilder<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // In some cases (e.g. route names change), internal state might have changed
-  // But it hasn't been committed yet, so hasn't propagated to the sync external store
-  // During this time, we need to return the internal state in `getState`
-  // Otherwise it can result in inconsistent state during render in children
-  // To avoid this, we use a ref for render phase, and immediately clear it on commit
-  const stateRef = React.useRef<State | null>(state);
-
-  stateRef.current = state;
-
-  useClientLayoutEffect(() => {
-    stateRef.current = null;
-  });
-
   const getState = useLatestCallback((): State => {
     const currentState = getCurrentState();
 
@@ -955,9 +941,9 @@ export function useNavigationBuilder<
     onAction,
     onUnhandledAction,
     getState,
+    state,
     emitter,
     router,
-    stateRef,
   });
 
   useFocusedListenersChildrenAdapter({
@@ -1012,7 +998,10 @@ export function useNavigationBuilder<
     return (
       <NavigationMetaContext.Provider value={undefined}>
         <NavigationHelpersContext.Provider value={navigation}>
-          <NavigationStateListenerProvider state={state}>
+          <NavigationStateListenerProvider
+            state={state}
+            getState={navigation.getState}
+          >
             <FocusedRouteKeyContext.Provider
               value={state.routes[state.index].key}
             >

package/src/useNavigationCache.tsx

@@ -134,7 +134,7 @@ export function useNavigationCache<
     [base, getState, navigation, setOptions, emitter]
   );
 
-  cache.current = state.routes.reduce<
+  const navigations = state.routes.reduce<
     NavigationCache<State, ScreenOptions, EventMap>
   >((acc, route) => {
     const previous = cache.current[route.key];
@@ -233,8 +233,12 @@ export function useNavigationCache<
     return acc;
   }, {});
 
+  React.useInsertionEffect(() => {
+    cache.current = navigations;
+  });
+
   return {
     base,
-    navigations: cache.current,
+    navigations,
   };
 }

package/src/useNavigationHelpers.tsx

@@ -20,9 +20,9 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
   onAction: (action: NavigationAction) => boolean;
   onUnhandledAction: (action: NavigationAction) => void;
   getState: () => State;
+  state: State;
   emitter: NavigationEventEmitter<any>;
   router: Router<State, Action>;
-  stateRef: React.RefObject<State | null>;
 };
 
 /**
@@ -39,12 +39,29 @@ export function useNavigationHelpers<
   onAction,
   onUnhandledAction,
   getState,
+  state,
   emitter,
   router,
-  stateRef,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.useContext(NavigationContext);
 
+  // In some cases (e.g. route names change), internal state might have changed
+  // But it hasn't been committed yet, so hasn't propagated to any listeners
+  // During this time, we need to return the internal state in `getState`
+  // Otherwise it can return an inconsistent state during render in children
+  // This may affect hooks like `useNavigationState` that need to read the state during render
+  // To avoid this, we use a ref for render phase, and immediately clear it on commit
+  // The ref won't be cleared if the render is discarded, e.g. when interrupted
+  // So we also track the stored state the render was based on
+  // Then ignore the ref once the stored state changes due to another dispatch
+  const stateRef = React.useRef<{ state: State; base: State } | null>(null);
+
+  stateRef.current = { state, base: getState() };
+
+  React.useInsertionEffect(() => {
+    stateRef.current = null;
+  });
+
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {
       const action = typeof op === 'function' ? op(getState()) : op;
@@ -103,16 +120,16 @@ export function useNavigationHelpers<
         return parentNavigationHelpers;
       },
       getState: (): State => {
+        const current = getState();
+        const pending = stateRef.current;
+
         // FIXME: Workaround for when the state is read during render
-        // By this time, we haven't committed the new state yet
-        // Without this `useSyncExternalStore` will keep reading the old state
-        // This may result in `useNavigationState` or `useIsFocused` returning wrong values
-        // Apart from `useSyncExternalStore`, `getState` should never be called during render
-        if (stateRef.current != null) {
-          return stateRef.current;
+        // Apart from subscriptions, `getState` should never be called during render
+        if (pending != null && pending.base === current) {
+          return pending.state;
         }
 
-        return getState();
+        return current;
       },
     } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
 

package/src/useNavigationState.tsx

@@ -1,7 +1,13 @@
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+
+import { useClientLayoutEffect } from './useClientLayoutEffect';
+
+type NavigationStateListener = {
+  getState: () => NavigationState<ParamListBase>;
+  subscribe: (callback: () => void) => () => void;
+};
 
 type Selector<ParamList extends ParamListBase, T> = (
   state: NavigationState<ParamList>
@@ -15,36 +21,64 @@ type Selector<ParamList extends ParamListBase, T> = (
 export function useNavigationState<ParamList extends ParamListBase, T>(
   selector: Selector<ParamList, T>
 ): T {
-  const stateListener = React.useContext(NavigationStateListenerContext);
+  if (typeof selector !== 'function') {
+    throw new Error(
+      `A selector function must be provided (got ${typeof selector}).`
+    );
+  }
 
-  if (stateListener == null) {
+  const listener = React.useContext(NavigationStateListenerContext);
+
+  if (listener == null) {
     throw new Error(
       "Couldn't get the navigation state. Is your component inside a navigator?"
     );
   }
 
-  const value = useSyncExternalStoreWithSelector(
-    stateListener.subscribe,
-    // @ts-expect-error: this is unsafe, but needed to make the generic work
-    stateListener.getState,
-    stateListener.getState,
-    selector
-  );
+  const { getState, subscribe } = listener;
+
+  const [, forceUpdate] = React.useReducer((count: number) => count + 1, 0);
+
+  // @ts-expect-error: this is unsafe, but we need to support it for now
+  const selected = selector(getState());
+
+  const selectionRef = React.useRef({ select: selector, selected });
 
-  return value;
+  useClientLayoutEffect(() => {
+    selectionRef.current = { select: selector, selected };
+  });
+
+  React.useEffect(() => {
+    const checkForUpdates = () => {
+      const selection = selectionRef.current;
+
+      // @ts-expect-error: this is unsafe, but we need to support it for now
+      if (!Object.is(selection.selected, selection.select(getState()))) {
+        forceUpdate();
+      }
+    };
+
+    const unsubscribe = subscribe(checkForUpdates);
+
+    // The state may have changed between the render and the subscription
+    checkForUpdates();
+
+    return unsubscribe;
+  }, [getState, subscribe]);
+
+  return selected;
 }
 
 export function NavigationStateListenerProvider({
   state,
+  getState,
   children,
 }: {
   state: NavigationState<ParamListBase>;
+  getState: () => NavigationState<ParamListBase>;
   children: React.ReactNode;
 }) {
   const listeners = React.useRef<(() => void)[]>([]);
-  const stateRef = React.useRef(state);
-
-  const getState = useLatestCallback(() => stateRef.current);
 
   const subscribe = useLatestCallback((callback: () => void) => {
     listeners.current.push(callback);
@@ -54,8 +88,8 @@ export function NavigationStateListenerProvider({
     };
   });
 
-  React.useLayoutEffect(() => {
-    stateRef.current = state;
+  // Notify subscribers once the new state has committed
+  useClientLayoutEffect(() => {
     listeners.current.forEach((callback) => callback());
   }, [state]);
 
@@ -75,9 +109,5 @@ export function NavigationStateListenerProvider({
 }
 
 const NavigationStateListenerContext = React.createContext<
-  | {
-      getState: () => NavigationState<ParamListBase>;
-      subscribe: (callback: () => void) => () => void;
-    }
-  | undefined
+  NavigationStateListener | undefined
 >(undefined);

package/src/useOnAction.tsx

@@ -60,7 +60,7 @@ export function useOnAction<State extends NavigationState>({
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     routerConfigOptionsRef.current = routerConfigOptions;
   });
 

package/src/useOptionsGetters.tsx

@@ -31,8 +31,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     }
   }, [navigation, onOptionsChange]);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     optionsRef.current = options;
+  }, [options]);
+
+  React.useEffect(() => {
     optionsChangeListener();
 
     return navigation?.addListener('focus', optionsChangeListener);

package/src/usePreventRemove.tsx

@@ -23,15 +23,24 @@ export function usePreventRemove(
   const navigation = useNavigation();
   const { key: routeKey } = useRoute();
 
-  const { setPreventRemove } = usePreventRemoveContext();
+  const { setPreventRemove, notifyPreventRemove } = usePreventRemoveContext();
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     setPreventRemove(id, routeKey, preventRemove);
+
     return () => {
       setPreventRemove(id, routeKey, false);
     };
   }, [setPreventRemove, id, routeKey, preventRemove]);
 
+  React.useEffect(() => {
+    notifyPreventRemove();
+
+    return () => {
+      notifyPreventRemove();
+    };
+  }, [id, routeKey, preventRemove, notifyPreventRemove]);
+
   const beforeRemoveListener = useLatestCallback<
     EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
   >((e) => {

package/src/useRouteCache.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { isRecordEqual } from './isRecordEqual';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<string, RouteProp<ParamListBase>>;
-
 /**
  * Utilities such as `getFocusedRouteNameFromRoute` need to access state.
  * So we need a way to suppress the warning for those use cases.
@@ -21,9 +19,12 @@ export function useRouteCache<State extends NavigationState>(
   routes: State['routes']
 ) {
   // Cache object which holds route objects for each screen
-  const cache = React.useMemo(() => ({ current: new Map() as RouteCache }), []);
+  const cache = React.useMemo(
+    () => ({ current: new Map<string, RouteProp<ParamListBase>>() }),
+    []
+  );
 
-  cache.current = routes.reduce((acc, route) => {
+  const next = routes.reduce((acc, route) => {
     const previous = cache.current.get(route.key);
     const { state, ...routeWithoutState } = route;
 
@@ -53,16 +54,23 @@ export function useRouteCache<State extends NavigationState>(
       }
     }
 
-    Object.defineProperty(proxy, CHILD_STATE, {
-      enumerable: false,
-      configurable: true,
-      value: state,
-    });
+    // @ts-expect-error: this isn't in type definitions coz we want this private
+    if (proxy[CHILD_STATE] !== state) {
+      Object.defineProperty(proxy, CHILD_STATE, {
+        enumerable: false,
+        configurable: true,
+        value: state,
+      });
+    }
 
     acc.set(route.key, proxy);
 
     return acc;
-  }, new Map() as RouteCache);
+  }, new Map<string, RouteProp<ParamListBase>>());
+
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
 
-  return Array.from(cache.current.values());
+  return Array.from(next.values());
 }

package/src/useScheduleUpdate.tsx

@@ -5,19 +5,20 @@ import { useClientLayoutEffect } from './useClientLayoutEffect';
 
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
- * However, navigation state is in the root component and React won't let us update it from a child.
- * This is a workaround for that, the scheduled update is stored in the ref without actually calling setState.
- * It lets all subsequent updates access the latest state so it stays correct.
- * Then we call setState during after the component updates.
+ * However, navigation state is in the root component and React won't let us update it from a child during render.
+ * The render could also be interrupted in concurrent mode, so we need to update after commit.
+ * So we queue the update in an insertion effect and flush it in a layout effect.
+ * Insertion effects run before layout effects, so every navigator in the tree has queued its update before we flush.
+ * This lets nested updates be applied from the root down without clobbering each other.
  */
 export function useScheduleUpdate(callback: () => void) {
   const { scheduleUpdate, flushUpdates } = React.useContext(
     NavigationBuilderContext
   );
 
-  // FIXME: This is potentially unsafe
-  // However, since we are using sync store, it might be fine
-  scheduleUpdate(callback);
+  React.useInsertionEffect(() => {
+    scheduleUpdate(callback);
+  });
 
   useClientLayoutEffect(flushUpdates);
 }

package/src/useSyncState.tsx

@@ -87,7 +87,11 @@ export function useSyncState<T>(getInitialState: () => T) {
 
     if (pendingUpdates.length !== 0) {
       store.batchUpdates(() => {
-        // Flush all the pending updates
+        // Updates are queued child-first as insertion effects run bottom-up.
+        // The root navigator replaces the whole state while nested navigators merge into it.
+        // So we apply them root-first to avoid the root clobbering nested updates.
+        pendingUpdates.reverse();
+
         for (const update of pendingUpdates) {
           update();
         }