Navigation state persistence in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens to navigation state after app restart?

Consider a React Native app using React Navigation with state persistence enabled. The user navigates from Home to Profile screen. Then the app is closed and reopened.

What will be the visible screen after reopening?

A The app shows the Home screen because navigation state is reset on restart.

B The app shows the Profile screen because navigation state was saved and restored.

C The app crashes because navigation state cannot be persisted.

D The app shows a blank screen because state restoration failed silently.

💡 Hint

Think about what state persistence means for navigation.

When navigation state persistence is enabled, the app saves the current navigation stack. On restart, it restores this stack, so the user returns to the last visited screen.

🧠 Conceptual

intermediate

Which method is used to save navigation state in React Navigation?

In React Navigation, to persist navigation state, which method is typically used to save the state externally?

A Using <code>onStateChange</code> callback to save state to storage.

B Using <code>useEffect</code> to reset navigation state on every render.

C Using <code>navigation.reset()</code> to save state.

D Using <code>componentDidMount</code> lifecycle method to save state.

💡 Hint

Look for a callback that triggers when navigation state changes.

The onStateChange prop on the NavigationContainer is called whenever navigation state changes. This is where you save the state to persistent storage.

❓ lifecycle

advanced

Why might navigation state restoration fail on app start?

Given this code snippet for restoring navigation state in React Native:

const [isReady, setIsReady] = React.useState(false);
const [initialState, setInitialState] = React.useState();

React.useEffect(() => {
  async function restoreState() {
    const savedState = await AsyncStorage.getItem('NAVIGATION_STATE');
    if (savedState) {
      setInitialState(JSON.parse(savedState));
    }
    setIsReady(true);
  }
  restoreState();
}, []);

if (!isReady) {
  return null;
}

return (
  <NavigationContainer initialState={initialState} onStateChange={...} >...
);

What is a common reason this restoration might silently fail and show the initial screen instead of the saved state?

A The <code>initialState</code> is set after the NavigationContainer mounts, so it ignores it.

B AsyncStorage.getItem returns a promise that is never awaited.

C The <code>isReady</code> state is set to true before <code>initialState</code> is set.

D The saved state is not stringified before saving.

💡 Hint

Think about when NavigationContainer reads the initialState prop.

NavigationContainer reads the initialState only on first mount. If initialState is undefined at that time and set later, it will ignore it and start fresh.

🔧 Debug

advanced

What error occurs if navigation state is corrupted on restore?

If the saved navigation state in AsyncStorage is corrupted or incomplete JSON, what error will React Navigation most likely throw when trying to restore it?

A ReferenceError: NavigationContainer is not defined

B TypeError: Cannot read property 'routes' of undefined

C SyntaxError: Unexpected token in JSON at position X

D RangeError: Maximum call stack size exceeded

💡 Hint

Consider what happens when JSON.parse fails.

If the saved state is corrupted, JSON.parse throws a SyntaxError indicating invalid JSON syntax.

🧠 Conceptual

expert

How to optimize navigation state persistence for large apps?

In a large React Native app with many screens, persisting the entire navigation state can be slow and cause UI delays. Which approach best optimizes navigation state persistence?

A Persist the full navigation state on every state change without throttling.

B Persist navigation state only when the app goes to background.

C Disable state persistence and rely on default navigation behavior.

D Persist only the minimal necessary parts of the navigation state, like current route name and params.

💡 Hint

Think about saving less data to improve performance.

Saving only essential parts of the navigation state reduces storage size and speeds up restoration, improving app responsiveness.