Navigation state persistence in React Native - UI Render Trace

Component - Navigation state persistence

This UI component shows how a React Native app keeps track of which screen the user last visited. When the app closes and opens again, it remembers the last screen and shows it instead of starting from the first screen. This is called navigation state persistence.

Widget Tree

App
├─ NavigationContainer
│  ├─ Stack.Navigator
│  │  ├─ Stack.Screen (HomeScreen)
│  │  └─ Stack.Screen (ProfileScreen)
└─ AsyncStorage (state storage)

The root App component contains a NavigationContainer that manages navigation state. Inside it, a Stack.Navigator holds two screens: HomeScreen and ProfileScreen. AsyncStorage is used behind the scenes to save and load the navigation state so the app remembers the last visited screen.

Render Trace - 4 Steps

Step 1: App

Step 2: NavigationContainer

Step 3: Stack.Navigator

Step 4: AsyncStorage

State Change - Re-render

Trigger:User taps a button to navigate from HomeScreen to ProfileScreen

Before

Navigation state shows HomeScreen as current

→

After

Navigation state updates to show ProfileScreen as current

Re-renders:NavigationContainer and Stack.Navigator re-render to show ProfileScreen

UI Quiz - 3 Questions

What does navigation state persistence do in this app?

A Changes the app theme based on screen

B Automatically logs the user out after inactivity

C Remembers the last screen visited and shows it on app restart

D Preloads all screens at app start

Key Insight

Persisting navigation state improves user experience by letting users continue where they left off. Using AsyncStorage with NavigationContainer in React Native is a simple way to save and restore navigation state across app launches.