@react-navigation/core 8.0.0-alpha.34 → 8.0.0-alpha.35

package/src/useNavigationCache.tsx

@@ -79,121 +79,143 @@ export function useNavigationCache<
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
-  const cache = React.useMemo(
-    () => ({
-      current: {} as NavigationCache<
-        State,
-        ScreenOptions,
-        EventMap,
-        ActionHelpers
-      >,
-    }),
+  const cache = React.useMemo<{
+    current: NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>;
+    routeNames: Record<string, string>;
+  }>(
+    () => ({ current: {}, routeNames: {} }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getState, parentNavigation, navigation, setOptions, emitter]
+    [
+      getState,
+      parentNavigation,
+      navigation,
+      setOptions,
+      router,
+      emitter,
+      withStackTrace,
+    ]
   );
 
-  const next = routes.reduce<
-    NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
-  >((acc, route) => {
-    const previous = cache.current[route.key];
-
-    if (previous) {
-      // If a cached navigation object already exists, reuse it
-      acc[route.key] = previous;
-    } else {
-      const dispatch = (
-        thunk:
-          | NavigationAction
-          | ((state: State) => NavigationAction | null | undefined)
-      ) => {
-        withStackTrace(dispatch, () => {
-          React.startTransition(() => {
-            const action =
-              typeof thunk === 'function' ? thunk(getState()) : thunk;
-
-            if (action != null) {
-              navigation.dispatch({ source: route.key, ...action });
-            }
+  const next = React.useMemo(() => {
+    return routes.reduce<
+      NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
+    >((acc, route) => {
+      const previous =
+        cache.routeNames[route.key] === route.name
+          ? cache.current[route.key]
+          : undefined;
+
+      if (previous) {
+        // If a cached navigation object already exists, reuse it
+        acc[route.key] = previous;
+      } else {
+        const dispatch = (
+          thunk:
+            | NavigationAction
+            | ((state: State) => NavigationAction | null | undefined)
+        ) => {
+          withStackTrace(dispatch, () => {
+            React.startTransition(() => {
+              const action =
+                typeof thunk === 'function' ? thunk(getState()) : thunk;
+
+              if (action != null) {
+                navigation.dispatch({ source: route.key, ...action });
+              }
+            });
           });
-        });
-      };
-
-      const actions = {
-        ...router.actionCreators,
-        ...CommonActions,
-      };
-
-      const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
-        (acc, name) => {
-          const helper = (...args: any) =>
-            withStackTrace(helper, () =>
-              // @ts-expect-error: name is a valid key, but TypeScript is dumb
-              dispatch(actions[name](...args))
-            );
-
-          acc[name] = helper;
-
-          return acc;
-        },
-        {}
-      );
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { emit, ...rest } = navigation;
-
-      acc[route.key] = {
-        ...rest,
-        ...helpers,
-        // FIXME: too much work to fix the types for now
-        ...(emitter.create(route.key) as any),
-        dispatch,
-        getParent: (routeName) => {
-          if (routeName === route.name) {
-            // If the passed route name is the same as the current route's name,
-            // we return the cached navigation object for the route
-            return acc[route.key];
-          }
-
-          if (routeName !== undefined) {
-            const parent = parentNavigation?.getParent(routeName);
-
-            if (parent === undefined) {
-              throw new Error(
-                `Couldn't find a navigation object for '${routeName}' in current or any parent screens. Is your component inside the correct screen?`
+        };
+
+        const actions = {
+          ...router.actionCreators,
+          ...CommonActions,
+        };
+
+        const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
+          (acc, name) => {
+            const helper = (...args: any) =>
+              withStackTrace(helper, () =>
+                // @ts-expect-error: name is a valid key, but TypeScript is dumb
+                dispatch(actions[name](...args))
               );
+
+            acc[name] = helper;
+
+            return acc;
+          },
+          {}
+        );
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { emit, ...rest } = navigation;
+
+        acc[route.key] = {
+          ...rest,
+          ...helpers,
+          // FIXME: too much work to fix the types for now
+          ...(emitter.create(route.key) as any),
+          dispatch,
+          getParent: (routeName) => {
+            if (routeName === route.name) {
+              // If the passed route name is the same as the current route's name,
+              // we return the cached navigation object for the route
+              return acc[route.key];
+            }
+
+            if (routeName !== undefined) {
+              const parent = parentNavigation?.getParent(routeName);
+
+              if (parent === undefined) {
+                throw new Error(
+                  `Couldn't find a navigation object for '${routeName}' in current or any parent screens. Is your component inside the correct screen?`
+                );
+              }
+
+              return parent;
+            }
+
+            return parentNavigation;
+          },
+          setOptions: (options: Partial<ScreenOptions>) => {
+            setOptions((o) => ({
+              ...o,
+              [route.key]: { ...o[route.key], ...options },
+            }));
+          },
+          isFocused: () => {
+            const state = rest.getState();
+
+            if (state.routes[state.index]?.key !== route.key) {
+              return false;
             }
 
-            return parent;
-          }
-
-          return parentNavigation;
-        },
-        setOptions: (options: Partial<ScreenOptions>) => {
-          setOptions((o) => ({
-            ...o,
-            [route.key]: { ...o[route.key], ...options },
-          }));
-        },
-        isFocused: () => {
-          const state = rest.getState();
-
-          if (state.routes[state.index]?.key !== route.key) {
-            return false;
-          }
-
-          // If the current screen is focused, we also need to check if parent navigator is focused
-          // This makes sure that we return the focus state in the whole tree, not just this navigator
-          return navigation ? navigation.isFocused() : true;
-        },
-      };
-    }
-
-    return acc;
-  }, {});
+            // If the current screen is focused, we also need to check if parent navigator is focused
+            // This makes sure that we return the focus state in the whole tree, not just this navigator
+            return navigation ? navigation.isFocused() : true;
+          },
+        };
+      }
+
+      return acc;
+    }, {});
+  }, [
+    cache,
+    routes,
+    getState,
+    navigation,
+    router,
+    withStackTrace,
+    emitter,
+    parentNavigation,
+    setOptions,
+  ]);
 
   React.useInsertionEffect(() => {
     cache.current = next;
-  });
+    cache.routeNames = Object.fromEntries(
+      routes.map((route) => [route.key, route.name])
+    );
+  }, [cache, next, routes]);
 
   return next;
 }

package/src/useNavigationState.tsx

@@ -6,6 +6,7 @@ import type { NavigationListForNested, RootNavigator } from './types';
 type NavigationStateEvent = 'update' | 'commit';
 
 type NavigationStateListener = {
+  initialStateContext: React.Context<NavigationState<ParamListBase>>;
   getState: () => NavigationState<ParamListBase>;
   getSnapshot: () => NavigationState<ParamListBase>;
   subscribe: (callback: (event: NavigationStateEvent) => void) => () => void;
@@ -83,6 +84,25 @@ export function useNavigationState(...args: unknown[]): unknown {
 
   const { getState, getSnapshot, subscribe } = listener;
 
+  const initialRef = React.useRef(true);
+
+  // We read the initial state from context on mount instead of using getState
+  // This ensures that we get proper state for the current render,
+  // even if the external store has been updated.
+  // We conditionally use `use` to avoid more unnecessary re-renders after first mount.
+  // The context subscription is removed on the next render, which can cause one extra render.
+  const initialState = initialRef.current
+    ? React.use(listener.initialStateContext)
+    : undefined;
+
+  // We track the last committed reducer entry, navigation state, and selector,
+  // so we can check if an update changes the value the component last committed.
+  const committedRef = React.useRef<{
+    entry: NavigationStateEntry | null;
+    state: NavigationState<ParamListBase>;
+    select: (state: NavigationState<ParamListBase>) => unknown;
+  }>({ entry: null, state: initialState ?? getSnapshot(), select });
+
   // The store can contain state from a transition that hasn't committed yet.
   // Reading it during render can show state that doesn't match the navigator in that render.
   // The reducer lets React process state in the same render lane as the navigator.
@@ -92,11 +112,28 @@ export function useNavigationState(...args: unknown[]): unknown {
       // Reading here ensures the processed event uses the state for that render.
       const state = event === 'update' ? getState() : getSnapshot();
 
+      // If we're processing the same reducer entry as the last commit,
+      // we compare against the state last committed by the component.
+      // We keep the reducer entry to avoid re-renders for unchanged selections.
+      // This means the reducer entry can still hold older navigation state.
+      // If a parent causes another render,
+      // we use the latest snapshot so the selector doesn't read stale state.
+      // We leave the reducer entry unchanged to avoid an extra render.
+      // We save that snapshot in committedRef when the render commits,
+      // so later updates compare against the state we actually rendered,
+      // including when the selector changed.
+      // If the reducer entry is different, we use its own navigation state,
+      // so comparisons include updates already processed in the pending render.
+      const previousState =
+        previous === committedRef.current.entry
+          ? committedRef.current.state
+          : previous.state;
+
       if (
         previous.listener === listener &&
-        (previous.state === state ||
+        (previousState === state ||
           (event === 'update' &&
-            Object.is(select(previous.state), select(state))))
+            Object.is(select(previousState), select(state))))
       ) {
         return previous;
       }
@@ -104,37 +141,24 @@ export function useNavigationState(...args: unknown[]): unknown {
       return { listener, state };
     },
     undefined,
-    () => ({ listener, state: getState() })
+    () => ({ listener, state: initialState ?? getSnapshot() })
   );
 
-  let state = entry.state;
-
-  const committedRef = React.useRef<{
-    entry: NavigationStateEntry | null;
-    state: NavigationState<ParamListBase>;
-    select: (state: NavigationState<ParamListBase>) => unknown;
-  }>({ entry: null, state, select });
+  const state =
+    // A different listener means the state belongs to another navigator.
+    // This can happen when the passed route name changes.
+    entry.listener !== listener ||
+    // An entry that advanced past the last commit is at least as new as the snapshot.
+    // An entry that didn't advance while the committed state changed is older.
+    entry === committedRef.current.entry
+      ? getSnapshot()
+      : entry.state;
 
   React.useInsertionEffect(() => {
+    initialRef.current = false;
     committedRef.current = { entry, state, select };
   });
 
-  const snapshot = getSnapshot();
-
-  const behind =
-    state !== snapshot &&
-    // A different listener means the state belongs to another navigator.
-    // This can happen when the passed route name changes.
-    (entry.listener !== listener ||
-      // An entry that advanced past the last commit is at least as new as the snapshot.
-      // An entry that didn't advance while the committed state changed is older.
-      entry === committedRef.current.entry);
-
-  if (behind) {
-    state = snapshot;
-    dispatch('commit');
-  }
-
   React.useLayoutEffect(() => {
     const check = (event: NavigationStateEvent) => {
       const { state, select } = committedRef.current;
@@ -173,6 +197,10 @@ export function NavigationStateListenerProvider({
   subscribe: (callback: () => void) => () => void;
   children: React.ReactNode;
 }) {
+  const [InitialStateContext] = React.useState(() =>
+    React.createContext(state)
+  );
+
   const [listeners] = React.useState(
     () => new Set<(event: NavigationStateEvent) => void>()
   );
@@ -195,6 +223,7 @@ export function NavigationStateListenerProvider({
 
   const context = React.useMemo(
     () => ({
+      initialStateContext: InitialStateContext,
       getState,
       getSnapshot: () => nextState ?? snapshotRef.current,
       subscribe: (callback: (event: NavigationStateEvent) => void) => {
@@ -208,12 +237,14 @@ export function NavigationStateListenerProvider({
         };
       },
     }),
-    [getState, listeners, nextState, subscribe]
+    [InitialStateContext, getState, listeners, nextState, subscribe]
   );
 
   return (
     <NavigationStateListenerContext.Provider value={context}>
-      {children}
+      <InitialStateContext.Provider value={state}>
+        {children}
+      </InitialStateContext.Provider>
     </NavigationStateListenerContext.Provider>
   );
 }
@@ -229,7 +260,7 @@ export function NamedNavigationStateListenerProvider({
 
   if (listener == null) {
     throw new Error(
-      "Couldn't find a navigation state listener. This is likely because the navigator doesn't render its content under 'NavigationContent'."
+      "Couldn't find a navigation state listener. This is likely a bug in the navigator.\n\nIf you're using a custom navigator, make sure that the navigator content is wrapped by the 'render' function returned by 'useNavigationBuilder'."
     );
   }
 

package/src/useOptionsGetters.tsx

@@ -1,17 +1,22 @@
-import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationStateContext } from './NavigationStateContext';
-import type { NavigationProp } from './types';
+import { IsFocusedContext } from './useIsFocused';
 
 type Options = {
   key?: string;
-  navigation?: NavigationProp<ParamListBase>;
   options?: object | undefined;
+  getFocusedRouteKey?: () => string | undefined;
 };
 
-export function useOptionsGetters({ key, options, navigation }: Options) {
+export function useOptionsGetters({
+  key,
+  options,
+  getFocusedRouteKey,
+}: Options) {
+  const isFocused = React.use(IsFocusedContext) ?? true;
+
   const optionsRef = React.useRef<object | undefined>(options);
   const optionsGettersFromChildRef = React.useRef<
     Record<string, () => object | undefined | null>
@@ -23,24 +28,13 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     NavigationStateContext
   );
 
-  const optionsChangeListener = React.useCallback(() => {
-    const isFocused = navigation?.isFocused() ?? true;
-    const hasChildren = Object.keys(optionsGettersFromChildRef.current).length;
-
-    if (isFocused && !hasChildren) {
-      onOptionsChange?.(optionsRef.current ?? {});
-    }
-  }, [navigation, onOptionsChange]);
-
   React.useInsertionEffect(() => {
     optionsRef.current = options;
   }, [options]);
 
   React.useEffect(() => {
-    optionsChangeListener();
-
-    return navigation?.addListener('focus', optionsChangeListener);
-  }, [navigation, options, optionsChangeListener]);
+    onOptionsChange?.();
+  }, [isFocused, onOptionsChange, options]);
 
   const getOptionsFromListener = React.useCallback(() => {
     for (const key in optionsGettersFromChildRef.current) {
@@ -58,9 +52,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
   }, []);
 
   const getCurrentOptions = React.useCallback(() => {
-    const isFocused = navigation?.isFocused() ?? true;
-
-    if (!isFocused) {
+    // We use focused route key from the navigator instead of `isFocused`
+    // Because `isFocused` may reflect the value the screen last rendered with,
+    // e.g. if `Activity` hides the screen before it rendered the new value,
+    // it updates at a lower priority, so it may be delayed.
+    if (key != null && getFocusedRouteKey?.() !== key) {
       return null;
     }
 
@@ -71,7 +67,7 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     }
 
     return optionsRef.current;
-  }, [navigation, getOptionsFromListener]);
+  }, [key, getFocusedRouteKey, getOptionsFromListener]);
 
   React.useInsertionEffect(() => {
     // We don't have a parent at the root
@@ -83,15 +79,19 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
   const addOptionsGetter = React.useCallback(
     (key: string, getter: () => object | undefined | null) => {
       optionsGettersFromChildRef.current[key] = getter;
-      optionsChangeListener();
 
       return () => {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete optionsGettersFromChildRef.current[key];
-        optionsChangeListener();
+
+        // Other getters and the focused route may still change during cleanup.
+        // Wait until the commit finishes before reporting the remaining options.
+        if (onOptionsChange !== undefined) {
+          queueMicrotask(onOptionsChange);
+        }
       };
     },
-    [optionsChangeListener]
+    [onOptionsChange]
   );
 
   return {

package/src/usePreventRemoveContext.tsx

@@ -7,7 +7,7 @@ export function usePreventRemoveContext() {
 
   if (value == null) {
     throw new Error(
-      "Couldn't find the prevent remove context. Is your component inside NavigationContent?"
+      "Couldn't find the prevent remove context. This is likely a bug in the navigator.\n\nIf you're using a custom navigator, make sure that the navigator content is wrapped by the 'render' function returned by 'useNavigationBuilder'."
     );
   }
 

package/src/useRouteCache.tsx

@@ -11,6 +11,10 @@ import type { RouteProp } from './types';
  */
 export const CHILD_STATE = Symbol('CHILD_STATE');
 
+type CachedRoute = RouteProp<ParamListBase> & {
+  [CHILD_STATE]?: NavigationState;
+};
+
 /**
  * Hook to cache route props for each screen in the navigator.
  * This lets add warnings and modifications to the route object but keep references between renders.
@@ -20,38 +24,58 @@ export function useRouteCache<State extends NavigationState>(
 ) {
   // Cache object which holds route objects for each screen
   const cache = React.useMemo(
-    () => ({ current: new Map<string, RouteProp<ParamListBase>>() }),
+    () => ({ current: new Map<string, CachedRoute>() }),
     []
   );
 
-  const next = routes.reduce((acc, route) => {
-    const previous = cache.current.get(route.key);
-    const { state, ...routeWithoutState } = route;
+  const next = React.useMemo(() => {
+    return routes.reduce((acc, route) => {
+      const previous = cache.current.get(route.key);
 
-    let proxy;
+      const { state: _, ...routeWithoutState } = route;
 
-    if (previous && isRecordEqual(previous, routeWithoutState)) {
-      // If a cached route object already exists, reuse it
-      proxy = previous;
-    } else {
-      proxy = routeWithoutState;
-    }
+      let proxy: CachedRoute;
 
-    if (process.env.NODE_ENV !== 'production' && proxy !== previous) {
-      // FIXME: since the state is updated with mutation, the route object cannot be frozen
-      // As a workaround, loop through the object and make the properties readonly
-      // Only needed once per proxy - skip if we're reusing a previously-frozen one
-      for (const [key, value] of Object.entries(proxy)) {
-        Object.defineProperty(proxy, key, {
-          enumerable: true,
-          configurable: true,
-          writable: false,
-          value,
-        });
+      if (previous && isRecordEqual(previous, routeWithoutState)) {
+        // If a cached route object already exists, reuse it
+        proxy = previous;
+      } else {
+        proxy = routeWithoutState;
+
+        if (process.env.NODE_ENV !== 'production') {
+          // FIXME: since the state is updated with mutation, the route object cannot be frozen
+          // As a workaround, loop through the object and make the properties readonly
+          // Only needed once per proxy - skip if we're reusing a previously-frozen one
+          for (const [key, value] of Object.entries(proxy)) {
+            Object.defineProperty(proxy, key, {
+              enumerable: true,
+              configurable: true,
+              writable: false,
+              value,
+            });
+          }
+        }
       }
-    }
 
-    // @ts-expect-error: this isn't in type definitions coz we want this private
+      acc.set(route.key, proxy);
+
+      return acc;
+    }, new Map<string, CachedRoute>());
+  }, [cache, routes]);
+
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
+  // Update child state on every render, including when the memo is reused.
+  // This restores the previous child state when a pending render is canceled.
+  return Array.from(next.values(), (proxy, index) => {
+    const state = routes[index]?.state;
+
+    // FIXME: We mutate the child state without replacing the cached route object,
+    // so nested navigation doesn't re-render the parent screen.
+    // This is not concurrent render safe, pending renders mutate this shared child state.
+    // Then `getFocusedRouteNameFromRoute` can expose it before the render commits.
     if (proxy[CHILD_STATE] !== state) {
       Object.defineProperty(proxy, CHILD_STATE, {
         enumerable: false,
@@ -60,14 +84,6 @@ export function useRouteCache<State extends NavigationState>(
       });
     }
 
-    acc.set(route.key, proxy);
-
-    return acc;
-  }, new Map<string, RouteProp<ParamListBase>>());
-
-  React.useInsertionEffect(() => {
-    cache.current = next;
+    return proxy;
   });
-
-  return Array.from(next.values());
 }

package/src/useScheduleUpdate.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import { useNavigationBuilderContext } from './NavigationBuilderContext';
 
@@ -13,8 +14,10 @@ import { useNavigationBuilderContext } from './NavigationBuilderContext';
 export function useScheduleUpdate(callback: () => void) {
   const { scheduleUpdate, flushUpdates } = useNavigationBuilderContext();
 
+  const latestCallback = useLatestCallback(callback);
+
   React.useInsertionEffect(() => {
-    scheduleUpdate(callback);
+    scheduleUpdate(latestCallback);
   });
 
   React.useLayoutEffect(flushUpdates);