Navigation Lifecycle
Unlike a typical component lifecycle, screens managed by React Navigation remain mounted even when not visible, requiring special lifecycle events to detect when a screen becomes focused or unfocused.
Why Screens Stay Mounted
In a stack navigator, previous screens remain in memory so that navigating back is instant, without needing to reload the entire screen from scratch.
Using the useFocusEffect Hook
The useFocusEffect hook runs its callback every time the screen comes into focus, and its cleanup function when the screen loses focus.
Using the useIsFocused Hook
The useIsFocused hook returns a boolean value indicating whether the current screen is focused, useful for conditionally pausing or resuming logic like video playback.
Listening to Navigation Events
You can also directly listen to "focus" and "blur" events using the navigation object, offering an alternative to hooks for class components or specific edge cases.
Common Use Cases
- Refreshing data every time a screen becomes visible
- Pausing video or audio playback when navigating away
- Resetting form state when returning to a screen
Conclusion
Understanding navigation lifecycle events like useFocusEffect and useIsFocused is essential for building React Native apps that behave correctly as users move between screens without unmounting and remounting components unnecessarily.
