React JS: Lifecycle

Life cycle phases in React components

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.

Initialization
  - constrctor()
Mounting
  - componentWillMount()
  - render()
  - componentdidMount()
Updating
  - componetWillReceiveProps()
  - componentShouldUpddate()
  - componetWillUpdate()
  - render()
  - componetDidUpdate()
Unmounting
  - componetWillUnmount()

 

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: Mounting, Updating, and Unmounting.

Mounting

Mounting means putting elements into the DOM.

React has four built-in methods that gets called, in this order, when mounting a component:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

The render() method is required and will always be called, the others are optional and will be called if you define them.

Updating

The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component’s state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

The render() method is required and will always be called, the others are optional and will be called if you define them.