modal vs react-native-navigation
modal vs react-native-navigation
modal
When the modal becomes visible, the modal screen component is mounted , and when the modal is hidden, the screen is updated and unmounted . These are the three phases in the component lifecycle: mounting, updating, and unmounting. A component is mounted when “it is being created and inserted into the DOM”
[1]. An update is triggered when the component’s props or state are changed. Unmounting is when a component is being removed from the DOM. Executing a phase executes the methods associated with it.
[2], provides an overview on the methods for each phase. demonstrates their order of execution as the screen is mounted, updated, and unmounted each time the modal becomes visible and then hidden.
react-native-navigation
provides routing and navigation for react native apps. The main view of the app is changed when navigating between screens
Navigating to screens using the react-navigation
library behaves differently to modals. A screen is only mounted the first time
that you navigate to a screen. Navigating away does not unmount the screen. Therefore, navigating back to the screen later does not mount it again.
Therefore, navigation includes an inherent performance advantage over modals. This is especially apparent with complex screen components that process many child components and calculations while mounting.
conclusion
A screen can be brought to the foreground as a child window using a modal or by navigating to the screen and changing the main view of the app. The former iterates through the entire component lifecycle each time that the modal becomes visible and then hidden. The latter only mounts the screen component the first time that the app navigates to it. Navigating away from the screen does not unmount the component. Therefore, navigating to that screen in the future does not mount it again. Thus, navigation generally performs better than modals.
Due to this difference, two rules of thumb apply when designing an app.
- Screens used with
react-native-modal
should be “lightweight”. - Any complex screens that have many children components and/or involve complex calculations should use
react-navigation
instead.
Notes: This is the default behavior in react-navigation
and may be changed using the unmountInactiveRoutes
config. You can read more about this in the docs.
reference
Optimizing React Native - Part 1: Modals vs. Navigation
React native modal vs react-navigation modal, which is more performant?