@react-navigation/core 8.0.0-alpha.23 → 8.0.0-alpha.25

package/src/useNavigationBuilder.tsx

@@ -583,7 +583,7 @@ export function useNavigationBuilder<
 
   const previousRouteKeyListRef = React.useRef(routeKeyList);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     previousRouteKeyListRef.current = routeKeyList;
   });
 
@@ -789,19 +789,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;
-
-  React.useLayoutEffect(() => {
-    stateRef.current = null;
-  });
-
   const getState = useLatestCallback((): State => {
     const currentState = getCurrentState();
 
@@ -877,14 +864,7 @@ export function useNavigationBuilder<
 
       listeners.forEach((listener) => listener?.(e));
     }
-
-    onEmitEvent({
-      type: e.type,
-      data: e.data,
-      target: e.target,
-      defaultPrevented: e.defaultPrevented,
-    });
-  });
+  }, onEmitEvent);
 
   useFocusEvents({ state, emitter });
 
@@ -963,9 +943,9 @@ export function useNavigationBuilder<
     onAction,
     onUnhandledAction,
     getState,
+    state,
     emitter,
     router,
-    stateRef,
   });
 
   useFocusedListenersChildrenAdapter({
@@ -1020,7 +1000,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={focusedRoute.key}>
               <PreventRemoveProvider>{element}</PreventRemoveProvider>
             </FocusedRouteKeyContext.Provider>

package/src/useNavigationCache.tsx

@@ -91,27 +91,15 @@ export function useNavigationCache<
     [getState, parentNavigationHelpers, navigation, setOptions, emitter]
   );
 
-  cache.current = routes.reduce<
+  const next = routes.reduce<
     NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
   >((acc, route) => {
     const previous = cache.current[route.key];
 
-    type Thunk =
-      | NavigationAction
-      | ((state: State) => NavigationAction | null | undefined);
-
     if (previous) {
       // If a cached navigation object already exists, reuse it
       acc[route.key] = previous;
     } else {
-      const dispatch = (thunk: Thunk) => {
-        const action = typeof thunk === 'function' ? thunk(getState()) : thunk;
-
-        if (action != null) {
-          navigation.dispatch({ source: route.key, ...action });
-        }
-      };
-
       const withStack = (callback: () => void) => {
         let isStackSet = false;
 
@@ -134,6 +122,23 @@ export function useNavigationCache<
         }
       };
 
+      const dispatch = (
+        thunk:
+          | NavigationAction
+          | ((state: State) => NavigationAction | null | undefined)
+      ) => {
+        withStack(() =>
+          React.startTransition(() => {
+            const action =
+              typeof thunk === 'function' ? thunk(getState()) : thunk;
+
+            if (action != null) {
+              navigation.dispatch({ source: route.key, ...action });
+            }
+          })
+        );
+      };
+
       const actions = {
         ...router.actionCreators,
         ...CommonActions,
@@ -142,10 +147,8 @@ export function useNavigationCache<
       const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
         (acc, name) => {
           acc[name] = (...args: any) =>
-            withStack(() =>
-              // @ts-expect-error: name is a valid key, but TypeScript is dumb
-              dispatch(actions[name](...args))
-            );
+            // @ts-expect-error: name is a valid key, but TypeScript is dumb
+            dispatch(actions[name](...args));
 
           return acc;
         },
@@ -160,7 +163,7 @@ export function useNavigationCache<
         ...helpers,
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
-        dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
+        dispatch,
         getParent: (routeName) => {
           if (routeName === route.name) {
             // If the passed route name is the same as the current route's name,
@@ -197,5 +200,9 @@ export function useNavigationCache<
     return acc;
   }, {});
 
-  return cache.current;
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
+  return next;
 }

package/src/useNavigationHelpers.tsx

@@ -19,9 +19,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>;
 };
 
 /**
@@ -37,12 +37,29 @@ export function useNavigationHelpers<
   onAction,
   onUnhandledAction,
   getState,
+  state,
   emitter,
   router,
-  stateRef,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.use(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;
@@ -87,16 +104,16 @@ export function useNavigationHelpers<
         );
       },
       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,22 +1,14 @@
 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 type {
-  NavigationListForNested,
-  NavigationProp,
-  RootNavigator,
-} from './types';
-import { useNavigation } from './useNavigation';
+import type { NavigationListForNested, RootNavigator } from './types';
 
 type NavigationStateListener = {
   getState: () => NavigationState<ParamListBase>;
   subscribe: (callback: () => void) => () => void;
 };
 
-type UseNavigationForName = (name: string) => NavigationProp<ParamListBase>;
-
 type NavigationStateForNested<
   Navigator,
   RouteName extends keyof NavigationListForNested<Navigator>,
@@ -47,81 +39,83 @@ export function useNavigationState<T>(
   selector: (state: NavigationState<ParamListBase>) => T
 ): T;
 export function useNavigationState(...args: unknown[]): unknown {
-  let navigation: NavigationProp<ParamListBase> | undefined,
-    stateListener: NavigationStateListener | undefined,
-    selector;
+  const selector = typeof args[0] === 'string' ? args[1] : args[0];
 
-  if (typeof args[0] === 'string') {
-    // `useNavigation` uses `use` internally, so it's fine to call it conditionally
-    // Cast to a non-generic signature to skip overload resolution - otherwise TS
-    // eagerly expands `NavigationListForNested<RootNavigator>` at this call site.
-    navigation = (useNavigation as UseNavigationForName)(args[0]);
-    selector = args[1];
-  } else {
-    selector = args[0];
+  if (typeof selector !== 'function') {
+    throw new Error(
+      `A selector function must be provided (got ${typeof selector}).`
+    );
   }
 
-  if (navigation == null) {
-    stateListener = React.use(NavigationStateListenerContext);
+  // @ts-expect-error: the public overloads guarantee the selector's type, but
+  // the `unknown[]` implementation signature can't express it
+  const select: (state: NavigationState<ParamListBase>) => unknown = selector;
+
+  let listener: NavigationStateListener | undefined;
 
-    if (stateListener == null) {
+  if (typeof args[0] === 'string') {
+    const name = args[0];
+    const listeners = React.use(NamedNavigationStateListenerListContext);
+
+    listener = listeners?.[name];
+
+    if (listener == null) {
+      throw new Error(
+        `Couldn't find a navigator for the route '${name}' in any of the parent screens. Is your component inside the correct screen?`
+      );
+    }
+  } else {
+    listener = React.use(NavigationStateListenerContext);
+
+    if (listener == null) {
       throw new Error(
         "Couldn't get the navigation state. Is your component inside a navigator?"
       );
     }
   }
 
-  const subscribe = React.useCallback(
-    (callback: () => void) => {
-      if (navigation) {
-        return navigation.addListener('state', callback);
-      } else if (stateListener) {
-        return stateListener.subscribe(callback);
-      } else {
-        throw new Error(
-          "Couldn't subscribe to navigation state changes. This is not expected."
-        );
-      }
-    },
-    [navigation, stateListener]
-  );
+  const { getState, subscribe } = listener;
 
-  const getSnapshot = navigation
-    ? navigation.getState
-    : stateListener?.getState;
+  const [, forceUpdate] = React.useReducer((count: number) => count + 1, 0);
 
-  if (getSnapshot == null) {
-    throw new Error("Couldn't get the navigation state. This is not expected.");
-  }
+  const selected = select(getState());
 
-  if (typeof selector !== 'function') {
-    throw new Error(
-      `A selector function must be provided (got ${typeof selector}).`
-    );
-  }
+  const selectionRef = React.useRef({ select, selected });
 
-  const value = useSyncExternalStoreWithSelector(
-    subscribe,
-    getSnapshot,
-    getSnapshot,
-    // @ts-expect-error we can't infer the type here
-    selector
-  );
+  React.useLayoutEffect(() => {
+    selectionRef.current = { select, selected };
+  });
+
+  React.useEffect(() => {
+    const checkForUpdates = () => {
+      const selection = selectionRef.current;
 
-  return value;
+      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);
@@ -131,8 +125,8 @@ export function NavigationStateListenerProvider({
     };
   });
 
+  // Notify subscribers once the new state has committed
   React.useLayoutEffect(() => {
-    stateRef.current = state;
     listeners.current.forEach((callback) => callback());
   }, [state]);
 
@@ -151,6 +145,42 @@ export function NavigationStateListenerProvider({
   );
 }
 
+export function NamedNavigationStateListenerProvider({
+  name,
+  children,
+}: {
+  name: string;
+  children: React.ReactNode;
+}) {
+  const listener = React.use(NavigationStateListenerContext);
+
+  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'."
+    );
+  }
+
+  const parents = React.use(NamedNavigationStateListenerListContext);
+
+  const listeners = React.useMemo(
+    () => ({
+      ...parents,
+      [name]: listener,
+    }),
+    [listener, name, parents]
+  );
+
+  return (
+    <NamedNavigationStateListenerListContext.Provider value={listeners}>
+      {children}
+    </NamedNavigationStateListenerListContext.Provider>
+  );
+}
+
 const NavigationStateListenerContext = React.createContext<
   NavigationStateListener | undefined
 >(undefined);
+
+export const NamedNavigationStateListenerListContext = React.createContext<
+  Record<string, NavigationStateListener> | undefined
+>(undefined);

package/src/useOnAction.tsx

@@ -1,17 +1,22 @@
 import type {
   NavigationAction,
+  NavigationRoute,
   NavigationState,
+  ParamListBase,
+  PartialRoute,
   PartialState,
   Router,
   RouterConfigOptions,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { getLoaderForState } from './DataLoading';
 import {
   type ChildActionListener,
   type ChildBeforeRemoveListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
+import { StaticTreeContext } from './StaticTreeContext';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 import { shouldPreventRemove, useOnPreventRemove } from './useOnPreventRemove';
@@ -27,6 +32,40 @@ type Options<State extends NavigationState> = {
   emitter: NavigationEventEmitter<EventMapCore<any>>;
 };
 
+type MaybePartialRoute =
+  | NavigationRoute<ParamListBase, string>
+  | PartialRoute<NavigationRoute<ParamListBase, string>>;
+
+const didFocusedRouteChange = (
+  currentState: NavigationState | PartialState<NavigationState>,
+  nextState: NavigationState | PartialState<NavigationState>
+) => {
+  let currentFocusedRoute: MaybePartialRoute | undefined =
+    currentState.routes[currentState.index ?? 0];
+
+  let nextFocusedRoute: MaybePartialRoute | undefined =
+    nextState.routes[nextState.index ?? 0];
+
+  let changed = currentFocusedRoute?.key !== nextFocusedRoute?.key;
+
+  while (
+    !changed &&
+    currentFocusedRoute?.state != null &&
+    nextFocusedRoute?.state != null &&
+    currentFocusedRoute.state !== nextFocusedRoute.state
+  ) {
+    currentFocusedRoute =
+      currentFocusedRoute.state.routes[currentFocusedRoute.state.index ?? 0];
+
+    nextFocusedRoute =
+      nextFocusedRoute.state.routes[nextFocusedRoute.state.index ?? 0];
+
+    changed = currentFocusedRoute?.key !== nextFocusedRoute?.key;
+  }
+
+  return changed;
+};
+
 /**
  * Hook to handle actions for a navigator, including state updates and bubbling.
  *
@@ -53,10 +92,12 @@ export function useOnAction<State extends NavigationState>({
     onDispatchAction,
   } = React.use(NavigationBuilderContext);
 
+  const tree = React.use(StaticTreeContext);
+
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     routerConfigOptionsRef.current = routerConfigOptions;
   });
 
@@ -88,8 +129,6 @@ export function useOnAction<State extends NavigationState>({
           result === null && action.target === state.key ? state : result;
 
         if (result !== null) {
-          onDispatchAction(action, state === result);
-
           if (state !== result) {
             const isPrevented = shouldPreventRemove(
               emitter,
@@ -100,10 +139,22 @@ export function useOnAction<State extends NavigationState>({
             );
 
             if (isPrevented) {
+              onDispatchAction(action, true);
+
               return true;
             }
 
+            onDispatchAction(action, false);
+
+            if (tree && didFocusedRouteChange(state, result)) {
+              const loader = getLoaderForState(tree, result);
+
+              loader?.();
+            }
+
             setState(result);
+          } else {
+            onDispatchAction(action, true);
           }
 
           if (onRouteFocusParent !== undefined) {
@@ -151,6 +202,7 @@ export function useOnAction<State extends NavigationState>({
       onRouteFocusParent,
       router,
       setState,
+      tree,
     ]
   );
 

package/src/useOnPreventRemove.tsx

@@ -1,6 +1,9 @@
 import type {
   NavigationAction,
+  NavigationRoute,
   NavigationState,
+  ParamListBase,
+  PartialRoute,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
@@ -23,16 +26,18 @@ const VISITED_ROUTE_KEYS = Symbol('VISITED_ROUTE_KEYS');
 export const shouldPreventRemove = (
   emitter: NavigationEventEmitter<EventMapCore<any>>,
   beforeRemoveListeners: Record<string, ChildBeforeRemoveListener | undefined>,
-  currentRoutes: { key: string }[],
-  nextRoutes: { key?: string | undefined }[],
+  currentRoutes: NavigationRoute<ParamListBase, string>[],
+  nextRoutes: (
+    | NavigationRoute<ParamListBase, string>
+    | PartialRoute<NavigationRoute<ParamListBase, string>>
+  )[],
   action: NavigationAction
 ) => {
-  const nextRouteKeys = nextRoutes.map((route) => route.key);
-
-  // Call these in reverse order so last screens handle the event first
-  const removedRoutes = currentRoutes
-    .filter((route) => !nextRouteKeys.includes(route.key))
-    .reverse();
+  const nextRoutesByKey = new Map(
+    nextRoutes
+      .map((route) => [route.key, route] as const)
+      .filter(([, route]) => route.key != null)
+  );
 
   const visitedRouteKeys: Set<string> =
     // @ts-expect-error: add this property to mark that we've already emitted this action
@@ -43,30 +48,53 @@ export const shouldPreventRemove = (
     [VISITED_ROUTE_KEYS]: visitedRouteKeys,
   };
 
-  for (const route of removedRoutes) {
+  // Call these in reverse order so last screens handle the event first
+  const reversedCurrentRoutes = [...currentRoutes].reverse();
+
+  for (const route of reversedCurrentRoutes) {
     if (visitedRouteKeys.has(route.key)) {
       // Skip if we've already emitted this action for this screen
       continue;
     }
 
-    // First, we need to check if any child screens want to prevent it
-    const isPrevented = beforeRemoveListeners[route.key]?.(beforeRemoveAction);
-
-    if (isPrevented) {
-      return true;
-    }
-
-    visitedRouteKeys.add(route.key);
+    if (!nextRoutesByKey.has(route.key)) {
+      // The route is not in next state, so it's being removed
+      // First, we need to check if any child screens want to prevent it
+      const isPrevented = beforeRemoveListeners[route.key]?.(
+        beforeRemoveAction,
+        undefined
+      );
+
+      if (isPrevented) {
+        return true;
+      }
+
+      visitedRouteKeys.add(route.key);
+
+      const event = emitter.emit({
+        type: 'beforeRemove',
+        target: route.key,
+        data: { action: beforeRemoveAction },
+        canPreventDefault: true,
+      });
 
-    const event = emitter.emit({
-      type: 'beforeRemove',
-      target: route.key,
-      data: { action: beforeRemoveAction },
-      canPreventDefault: true,
-    });
+      if (event.defaultPrevented) {
+        return true;
+      }
+    } else {
+      // The route is kept but its nested state changed, so propagate the check into the nested navigator
+      const nextRoute = nextRoutesByKey.get(route.key);
+
+      if (route.state != null && route.state !== nextRoute?.state) {
+        const isPrevented = beforeRemoveListeners[route.key]?.(
+          beforeRemoveAction,
+          nextRoute?.state
+        );
 
-    if (event.defaultPrevented) {
-      return true;
+        if (isPrevented) {
+          return true;
+        }
+      }
     }
   }
 
@@ -84,17 +112,21 @@ export function useOnPreventRemove({
 
   React.useInsertionEffect(() => {
     if (routeKey) {
-      return addKeyedListener?.('beforeRemove', routeKey, (action) => {
-        const state = getState();
-
-        return shouldPreventRemove(
-          emitter,
-          beforeRemoveListeners,
-          state.routes,
-          [],
-          action
-        );
-      });
+      return addKeyedListener?.(
+        'beforeRemove',
+        routeKey,
+        (action, nextState) => {
+          const state = getState();
+
+          return shouldPreventRemove(
+            emitter,
+            beforeRemoveListeners,
+            state.routes,
+            nextState?.routes ?? [],
+            action
+          );
+        }
+      );
     }
   }, [addKeyedListener, beforeRemoveListeners, emitter, getState, routeKey]);
 }