@react-navigation/core 7.0.2 → 7.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "keywords": [
     "react",
     "react-native",
@@ -95,5 +95,5 @@
       ]
     ]
   },
-  "gitHead": "987f0a874506c76c62dfd4335551fd2d0b0b52d1"
+  "gitHead": "596ce0641241b9f003a6ad130f6f4837206ef064"
 }

package/src/BaseNavigationContainer.tsx

@@ -103,8 +103,8 @@ export const BaseNavigationContainer = React.forwardRef(
       );
     }
 
-    const [state, getState, setState] = useSyncState<State>(() =>
-      getPartialState(initialState == null ? undefined : initialState)
+    const [state, getState, setState, scheduleUpdate] = useSyncState<State>(
+      () => getPartialState(initialState == null ? undefined : initialState)
     );
 
     const isFirstMountRef = React.useRef<boolean>(true);
@@ -260,9 +260,16 @@ export const BaseNavigationContainer = React.forwardRef(
         addKeyedListener,
         onDispatchAction,
         onOptionsChange,
+        scheduleUpdate,
         stackRef,
       }),
-      [addListener, addKeyedListener, onDispatchAction, onOptionsChange]
+      [
+        addListener,
+        addKeyedListener,
+        onDispatchAction,
+        onOptionsChange,
+        scheduleUpdate,
+      ]
     );
 
     const isInitialRef = React.useRef(true);

package/src/NavigationBuilderContext.tsx

@@ -61,8 +61,12 @@ export const NavigationBuilderContext = React.createContext<{
   onRouteFocus?: (key: string) => void;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
   onOptionsChange: (options: object) => void;
+  scheduleUpdate: (callback: () => void) => void;
   stackRef?: React.MutableRefObject<string | undefined>;
 }>({
   onDispatchAction: () => undefined,
   onOptionsChange: () => undefined,
+  scheduleUpdate: () => {
+    throw new Error("Couldn't find a context for scheduling updates.");
+  },
 });

package/src/SceneView.tsx

@@ -72,9 +72,37 @@ export function SceneView<
 
       setState({
         ...state,
-        routes: state.routes.map((r) =>
-          r.key === route.key ? { ...r, state: child } : r
-        ),
+        routes: state.routes.map((r) => {
+          if (r.key !== route.key) {
+            return r;
+          }
+
+          const nextRoute = { ...r, state: child };
+
+          // Before updating the state, cleanup any nested screen and state
+          // This will avoid the navigator trying to handle them again
+          if (
+            nextRoute.params &&
+            (('state' in nextRoute.params &&
+              typeof nextRoute.params.state === 'object' &&
+              nextRoute.params.state !== null) ||
+              ('screen' in nextRoute.params &&
+                typeof nextRoute.params.screen === 'string'))
+          ) {
+            // @ts-expect-error: we don't have correct type for params
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { state, screen, params, initial, ...rest } =
+              nextRoute.params;
+
+            if (Object.keys(rest).length) {
+              nextRoute.params = rest;
+            } else {
+              delete nextRoute.params;
+            }
+          }
+
+          return nextRoute;
+        }),
       });
     },
     [getState, route.key, setState]

package/src/useDescriptors.tsx

@@ -116,9 +116,8 @@ export function useDescriptors<
   const [options, setOptions] = React.useState<Record<string, ScreenOptions>>(
     {}
   );
-  const { onDispatchAction, onOptionsChange, stackRef } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { onDispatchAction, onOptionsChange, scheduleUpdate, stackRef } =
+    React.useContext(NavigationBuilderContext);
 
   const context = React.useMemo(
     () => ({
@@ -129,6 +128,7 @@ export function useDescriptors<
       onRouteFocus,
       onDispatchAction,
       onOptionsChange,
+      scheduleUpdate,
       stackRef,
     }),
     [
@@ -139,6 +139,7 @@ export function useDescriptors<
       onRouteFocus,
       onDispatchAction,
       onOptionsChange,
+      scheduleUpdate,
       stackRef,
     ]
   );

package/src/useNavigationBuilder.tsx

@@ -18,6 +18,7 @@ import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
 import { isRecordEqual } from './isRecordEqual';
+import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationRouteContext } from './NavigationRouteContext';
 import { NavigationStateContext } from './NavigationStateContext';
@@ -559,12 +560,17 @@ export function useNavigationBuilder<
         : nextState;
   }
 
+  const { scheduleUpdate } = React.useContext(NavigationBuilderContext);
+
   const shouldUpdate = state !== nextState;
 
   useIsomorphicLayoutEffect(() => {
     if (shouldUpdate) {
       // If the state needs to be updated, we'll schedule an update
-      setState(nextState);
+      // These updates will be batched and run in the reverse order
+      scheduleUpdate(() => {
+        setState(nextState);
+      });
     }
   });
 

package/src/useSyncState.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import { deepFreeze } from './deepFreeze';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 const createStore = <T,>(getInitialState: () => T) => {
   const listeners: (() => void)[] = [];
@@ -19,10 +21,16 @@ const createStore = <T,>(getInitialState: () => T) => {
     return state;
   };
 
+  let isBatching = false;
+  let didUpdate = false;
+
   const setState = (newState: T) => {
     state = deepFreeze(newState);
+    didUpdate = true;
 
-    listeners.forEach((listener) => listener());
+    if (!isBatching) {
+      listeners.forEach((listener) => listener());
+    }
   };
 
   const subscribe = (callback: () => void) => {
@@ -37,9 +45,21 @@ const createStore = <T,>(getInitialState: () => T) => {
     };
   };
 
+  const batchUpdates = (callback: () => void) => {
+    isBatching = true;
+    callback();
+    isBatching = false;
+
+    if (didUpdate) {
+      didUpdate = false;
+      listeners.forEach((listener) => listener());
+    }
+  };
+
   return {
     getState,
     setState,
+    batchUpdates,
     subscribe,
   };
 };
@@ -55,5 +75,32 @@ export function useSyncState<T>(getInitialState: () => T) {
 
   React.useDebugValue(state);
 
-  return [state, store.getState, store.setState] as const;
+  const pendingUpdatesRef = React.useRef<(() => void)[]>([]);
+
+  const scheduleUpdate = useLatestCallback((callback: () => void) => {
+    pendingUpdatesRef.current.push(callback);
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    // Flush all the pending updates
+    const pendingUpdates = pendingUpdatesRef.current;
+
+    pendingUpdatesRef.current = [];
+
+    if (pendingUpdates.length !== 0) {
+      store.batchUpdates(() => {
+        // Flush all the pending updates
+        // These updates should be scheduled in useEffect
+        // Run them in reverse order so that the deepest updates are run last
+        // This is opposite to useEffect where the deepest effects are run first
+        for (let i = pendingUpdates.length - 1; i >= 0; i--) {
+          const update = pendingUpdates[i];
+
+          update();
+        }
+      });
+    }
+  });
+
+  return [state, store.getState, store.setState, scheduleUpdate] as const;
 }