Lazy Loading in React Navigation Stack: State Preservation Across Visits

Direct Answer

React Navigation v6 guarantees that a screen is mounted only the first time it is focused when lazy is true. After that initial mount the component stays in the navigation stack; it is not unmounted when you navigate away. Consequently, all local state (e.g., useState, useRef, form values) survives a return to the screen unless you explicitly enable an unmount‑on‑blur option or use react-native-screens with unmountOnBlur set to true.

There is no documented platform‑specific difference between iOS and Android for this behavior. Both platforms use the same navigation stack implementation, so the life‑cycle is identical unless you toggle platform‑specific flags in react-native-screens or your own code.

Confirmed Facts

• Lazy loading delays the first render until the screen receives focus.
• After the first render, the screen’s component instance remains mounted in the stack.
• State is preserved across visits by default; only unmountOnBlur or detachInactiveScreens can cause a remount.
• Platform‑neutral: iOS and Android exhibit the same mounting semantics.

Best‑Practice Steps When State Isn’t Preserved

1. Verify that unmountOnBlur is not set to true in your navigator configuration.

   createStackNavigator({
     screenOptions: { unmountOnBlur: false },
   });

2. If you need to reset state on a fresh visit, use the focus or blur listeners instead of useEffect with an empty dependency array.

   useFocusEffect(
     React.useCallback(() => {
       // refresh data here
       return () => {};
     }, [])
   );
   

3. Persist data that should survive navigation in a shared store (React Context, Redux, Zustand, etc.) rather than relying solely on local component state.
4. For complex forms, consider using useRef for mutable values that should not trigger re‑renders, or useState with a persisted key.
5. If using react-native-screens, enable freezeOnBlur (default) to avoid unnecessary re‑renders while keeping the component mounted.

Diagnostic Question

Does your project have react-native-screens enabled and are you using its unmountOnBlur or detachInactiveScreens options? That detail can change whether a screen is remounted.