@react-navigation/core 7.21.3 → 7.21.4

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

@@ -54,7 +54,7 @@ export function NavigationStateListenerProvider({
     };
   });
 
-  React.useLayoutEffect(() => {
+  React.useInsertionEffect(() => {
     stateRef.current = state;
     listeners.current.forEach((callback) => callback());
   }, [state]);

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();
         }