React to life cycle events

Find out React Lifecycle events and how to use them

React components can have multiple lifecycle event hooks.

Hooks allow functional components to also access them in different ways.

Throughout the life cycle of a component, a series of events will be called. For each event, you can hook and provide custom functions.

What hook is most suitable for what function, we will see here.

First, the React component life cycle is divided into three phases:

  • installation
  • updating
  • Uninstalling

Let's learn more about these three stages and the methods called in each stage.

installation

When mounting, before mounting the component in the DOM, you have 4 life cycle methods:constructor,getDerivedStateFromProps,renderwithcomponentDidMount.

Builder

The constructor is the first method called when the component is installed.

Generally, you can use the constructor to set the initial state with the following command:this.state = ....

getDerivedStateFromProps()

When the country relies on propsgetDerivedStateFromPropsCan be used to update the status based on the props value.

It was added in React 16.3 and aims to replacecomponentWillReceivePropsNot recommended method.

Using this method, you cannot accessthisBecause it is a static method.

This is a pure method, so it does not cause side effects and should return the same output when called multiple times with the same input.

Returns the object with the updated element (if the state does not change, it returns null)

Make ()

From the render() method, you return the JSX that builds the component interface.

This is a pure method, so it does not cause side effects and should return the same output when called multiple times with the same input.

componentDidMount()

This method is used to perform API calls or process operations on the DOM.

updating

When updating, you have 5 lifecycle methods before the component is installed in the DOM:getDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdatewithcomponentDidUpdate.

getDerivedStateFromProps()

For this method, see the description above.

shouldComponentUpdate()

This method returns a Boolean value,trueorfalse. You can use this method to tell React whether to continue re-rendering, and the default istrue. You will come backfalseThe cost of re-rendering is high, and you want more control over when it happens.

Make ()

For this method, see the description above.

getSnapshotBeforeUpdate()

In this method, you can access the properties and status of the previous rendering as well as the current rendering.

Its use cases are very niche, and it may be the one you will use less.

componentDidUpdate()

This method will be called when the component has been updated in the DOM. Use it to run any third-party DOM API or call API that must be updated when the DOM changes.

It corresponds tocomponentDidMount()The method starting from the installation phase.

Uninstalling

At this stage, we have only one way,componentWillUnmount.

componentWillUnmount()

This method will be called when the component is removed from the DOM. Use this function to perform any type of cleanup you need to perform.

heritage

If you are using the following applicationcomponentWillMount,componentWillReceivePropsorcomponentWillUpdate, Those are deprecated in React 16.3 and you should migrate to other lifecycle methods.

Download mine for freeResponse Handbook


More response tutorials:


Online technical encyclopedia!