React Navigation Lifecycle: Screens Don't Unmount
Unlike the web, React Native screens don't unmount when you navigate away; they stay mounted to preserve state. This means a standard useEffect only runs once. To run code when a screen is shown, you must listen for the focus event.
Why it exists
Mobile navigation is more complex than web navigation. Users expect to return to a screen and find it exactly as they left it, including its internal navigation stack and scroll position. Unmounting and remounting screens on every navigation change, as is common on the web, would lose this state and create a poor user experience.
The mental model
Think of your app's screens as a stack of cards. Navigating to a new screen adds a card on top, obscuring the one below. Going back removes the top card, revealing the one underneath. The underlying cards are still there, just not visible. They don't get recreated every time they're revealed, which is why their state is preserved.
How it works
When you navigate from screen A to screen B, screen B mounts, but screen A remains mounted in the background. When you go back, screen B unmounts, and the existing instance of screen A is simply revealed. Because of this, standard React lifecycle hooks like useEffect with an empty dependency array [] only fire on the initial mount. To react to screen visibility changes, you must use the navigation lifecycle events. You can subscribe to the focus and blur events using navigation.addListener inside a useEffect hook. The focus event fires when the screen comes into view, and blur fires when it's navigated away from.
When to use it
Use navigation lifecycle events whenever you need to perform an action as a user enters or leaves a screen. This is essential for fetching fresh data from an API when a screen becomes active, starting or stopping animations or background tasks like video playback, or tracking screen views for analytics.
When not to use it
For one-time setup that only needs to happen when a component is first created, a standard useEffect with an empty dependency array is still appropriate. The navigation lifecycle is for actions tied to screen visibility, not the component's initial creation and destruction.
One canonical example
To run code every time a screen becomes the active screen, you use a useEffect hook to add a listener. Inside your screen component, you would write: React.useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { / your code here, e.g., refetch data / }); return unsubscribe; }, [navigation]);. This sets up the listener on mount and correctly cleans it up when the component fully unmounts.
Interview question
To execute code every time a React Native screen becomes visible after being navigated away from, which method is most appropriate?
- a.Calling a function directly within the screen's render method
- b.Using useEffect with the screen's props as dependencies
- c.A standard useEffect hook with an empty dependency array []
- d.Subscribing to the 'focus' event using navigation.addListenerCorrect
Why? this is the answer
The card states that screens remain mounted when navigated away from, so a standard useEffect with an empty dependency array (C) only runs on initial mount, not subsequent visibility changes. Subscribing to the 'focus' event (D) is the correct way to run code specifically when a screen comes into view.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react native
- #react navigation
- #mobile
- #lifecycle
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles