@react-navigation/core 7.22.0 → 7.23.0

package/src/useDescriptors.tsx

@@ -7,6 +7,8 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { isArrayEqual } from './isArrayEqual';
+import { isRecordEqual } from './isRecordEqual';
 import {
   type AddKeyedListener,
   type AddListener,
@@ -84,6 +86,31 @@ type Options<
   emitter: NavigationEventEmitter<EventMap>;
 };
 
+type DescriptorCache<
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  ActionHelpers extends Record<string, () => void>,
+> = Record<
+  string,
+  {
+    descriptor: Descriptor<
+      ScreenOptions,
+      NavigationProp<
+        ParamListBase,
+        string,
+        string | undefined,
+        State,
+        ScreenOptions,
+        EventMap
+      > &
+        ActionHelpers,
+      RouteProp<ParamListBase>
+    >;
+    deps: unknown[];
+  }
+>;
+
 /**
  * Hook to create descriptor objects for the child routes.
  *
@@ -173,6 +200,10 @@ export function useDescriptors<
 
   const routes = useRouteCache(state.routes);
 
+  const cache = React.useMemo<{
+    current: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers>;
+  }>(() => ({ current: {} }), []);
+
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
     navigation: NavigationProp<
@@ -223,7 +254,8 @@ export function useDescriptors<
       EventMap
     >,
     customOptions: ScreenOptions,
-    routeState: NavigationState | PartialState<NavigationState> | undefined
+    routeState: NavigationState | PartialState<NavigationState> | undefined,
+    layout: ScreenLayout<ScreenOptions> | undefined
   ) => {
     const config = screens[route.name];
     const screen = config.props;
@@ -238,14 +270,6 @@ export function useDescriptors<
         return o;
       });
 
-    const layout =
-      // The `layout` prop passed to `Screen` elements,
-      screen.layout ??
-      // The `screenLayout` props passed to `Group` elements
-      config.layout ??
-      // The default `screenLayout` passed to the navigator
-      screenLayout;
-
     let element = (
       <SceneView
         navigation={navigation}
@@ -279,31 +303,67 @@ export function useDescriptors<
     );
   };
 
+  const next: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers> =
+    {};
+
   const descriptors = routes.reduce<
     Record<
       string,
-      Descriptor<
+      DescriptorCache<
+        State,
         ScreenOptions,
-        NavigationProp<
-          ParamListBase,
-          string,
-          string | undefined,
-          State,
-          ScreenOptions,
-          EventMap
-        > &
-          ActionHelpers,
-        RouteProp<ParamListBase>
-      >
+        EventMap,
+        ActionHelpers
+      >[string]['descriptor']
     >
   >((acc, route, i) => {
     const navigation = navigations[route.key];
     const customOptions = getOptions(route, navigation, options[route.key]);
+    const routeState = state.routes[i].state;
+    const config = screens[route.name];
+    const screen = config.props;
+
+    const layout =
+      // The `layout` prop passed to `Screen` elements,
+      screen.layout ??
+      // The `screenLayout` props passed to `Group` elements
+      config.layout ??
+      // The default `screenLayout` passed to the navigator
+      screenLayout;
+
+    const deps = [
+      route,
+      navigation,
+      routeState,
+      screen.component,
+      screen.getComponent,
+      screen.children,
+      layout,
+      context,
+      theme,
+      getState,
+      setState,
+    ];
+
+    const previous = cache.current[route.key];
+
+    if (
+      previous &&
+      isArrayEqual(previous.deps, deps) &&
+      isRecordEqual(previous.descriptor.options, customOptions)
+    ) {
+      next[route.key] = previous;
+      acc[route.key] = previous.descriptor;
+
+      return acc;
+    }
+
     const element = render(
       route,
       navigation,
       customOptions,
-      state.routes[i].state
+      routeState,
+      layout
     );
 
     acc[route.key] = {
@@ -316,9 +376,18 @@ export function useDescriptors<
       options: customOptions,
     };
 
+    next[route.key] = {
+      descriptor: acc[route.key],
+      deps,
+    };
+
     return acc;
   }, {});
 
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
   /**
    * Create a descriptor object for a route.
    *
@@ -337,7 +406,9 @@ export function useDescriptors<
 
     const navigation = base;
     const customOptions = getOptions(route, navigation, {});
-    const element = render(route, navigation, customOptions, undefined);
+    const config = screens[route.name];
+    const layout = config.props.layout ?? config.layout ?? screenLayout;
+    const element = render(route, navigation, customOptions, undefined, layout);
 
     return {
       route,

package/src/useNavigationBuilder.tsx

@@ -21,6 +21,7 @@ import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
 import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
+// eslint-disable-next-line import-x/no-deprecated
 import { NavigationMetaContext } from './NavigationMetaContext';
 import { NavigationRouteContext } from './NavigationProvider';
 import { NavigationStateContext } from './NavigationStateContext';

package/src/usePreventRemove.tsx

@@ -1,5 +1,4 @@
 import type { NavigationAction } from '@react-navigation/routers';
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
@@ -18,7 +17,7 @@ export function usePreventRemove(
   preventRemove: boolean,
   callback: (options: { data: { action: NavigationAction } }) => void
 ) {
-  const [id] = React.useState(() => nanoid());
+  const id = React.useId();
 
   const navigation = useNavigation();
   const { key: routeKey } = useRoute();

package/src/useRegisterNavigator.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 
 import { SingleNavigatorContext } from './EnsureSingleNavigator';
@@ -8,7 +7,8 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  * This is used to prevent multiple navigators under a single container or screen.
  */
 export function useRegisterNavigator() {
-  const [key] = React.useState(() => nanoid());
+  const key = React.useId();
+
   const container = React.useContext(SingleNavigatorContext);
 
   if (container === undefined) {