@react-navigation/core 7.21.2 → 7.21.4

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