Life cycle phases in React components

Every React component goes through the same lifecycle:

1. A component mounts when it’s added to the screen.
2. A component updates when it receives new props or state, usually in response to an interaction.
3. A component unmounts when it’s removed from the screen.

Mounting

The first phase of the React Component life cycle is the Mounting phase. This is where we start initialization of the Component. At this phase, the Component’s props and state are defined and configured. The Component and all its children are mounted on to the Native UI Stack (DOM, UIView, etc.). Finally, we can do post-processing if required. The Mounting phase only occurs once.

Update

The next phase of the life cycle is the Update phase. In this phase, we get new props, change state, handle user interactions and communicate with the component hierarchy. This is where we spend most of our time in the Component’s life. we repeat this phase over and over.

Unmount

The final phase of the life cycle is the Unmount phase. This phase occurs when a component instance is unmounted from the Native UI. This can occur when the user navigates away, the UI page changes, a component is hidden (like a drawer), etc.