React lifecycle hooks help us to detect the various phases of rendering UI. In the web, we often use useEffect hook to perform actions when rendering, on change of specified variables, and when unmounting. However, this is not enough when it comes to recognizing screen transitions with React Navigation in React Native.
I faced such a situation some time ago. The project I was working on had a Profile screen and a Settings screen. The profile details can be updated on the Settings screen. However, when navigating back to the Profile screen from Settings screen, I still saw the old outdated information, even if it has been set up to fetch profile data on rendering.
This happens because how React Navigation deals with rendering UI (screens) is rather different than how normally React deals with rendering on the web.

#react-native #programming #react-navigation #reactjs #react