React Component Lifecycle

In this chapter, we will discuss the lifecycle of React components.

The lifecycle of a component can be divided into three states:

  • Mounting: Has been inserted into the real DOM
  • Updating: Being re-rendered
  • Unmounting: Has been removed from the real DOM

Mounting

When a component instance is created and inserted into the DOM, the lifecycle method invocation order is as follows:

  • constructor(): Called before a React component is mounted, its constructor will be invoked.
  • getDerivedStateFromProps(): Called before the render method is invoked, and will be called during the initial mount and subsequent updates.
  • render(): The render() method is the only required method in a class component.
  • componentDidMount(): Called immediately after the component is mounted (inserted into the DOM tree).

The render() method is the only required method in a class component; other methods can be implemented as needed.

For detailed documentation on these methods, please refer tothe official documentation。

Updating

Whenever a component's state or props change, the component will update.

An update is triggered when a component's props or state change. The lifecycle method invocation order for component updates is as follows:

  • getDerivedStateFromProps(): Called before the render method is invoked, and will be called during both the initial mount and subsequent updates. Based on the return value of shouldComponentUpdate(), it determines whether the output of the React component is affected by the current state or props changes.
  • shouldComponentUpdate(): When props or state change, shouldComponentUpdate() will be called before rendering is executed.
  • render(): The render() method is the only required method in a class component.
  • getSnapshotBeforeUpdate(): Called before the most recently rendered output is committed to the DOM node.
  • componentDidUpdate(): Called immediately after the update.

The render() method is the only required method in a class component; other methods can be implemented as needed.

For detailed documentation on these methods, please refer tothe official documentation。

Unmounting

When a component is removed from the DOM, the following method will be called:

For detailed documentation on these methods, please refer tothe official documentation。

Example

The following is an example of the current time, updated every second:

Example

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, Example!</h1> <h2>The current time is:{this.state.date.toLocaleTimeString()}.</h2> </div> ); } } const root = ReactDOM.createRoot(document.body); root.render( <Clock /> );

Try it »

In the following example, after the Hello component is loaded, a timer is set up via the componentDidMount method to reset the component's opacity every 100 milliseconds and re-render:

React Example

class Hello extends React.Component { constructor(props) { super(props); this.state = {opacity: 1.0}; } componentDidMount() { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); } render () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Hello name="world"/> );

Try it »

The following example initializesstate ， setNewnumberfor updatingstate. All lifecycle methods are in theContentcomponent.

React Example

class Button extends React.Component { constructor(props) { super(props); this.state = { data: 0 }; this.setNewNumber = this.setNewNumber.bind(this); } setNewNumber() { this.setState({ data: this.state.data + 1 }); } render() { return ( <div> <button onClick={this.setNewNumber}>INCREMENT</button> <Content myNumber={this.state.data} /> </div> ); } } class Content extends React.Component { componentDidMount() { console.log("Component DID MOUNT!"); } shouldComponentUpdate(newProps, newState) { return true; } componentDidUpdate(prevProps, prevState) { console.log("Component DID UPDATE!"); } componentWillUnmount() { console.log("Component WILL UNMOUNT!"); } render() { return ( <div> <h3>{this.props.myNumber}</h3> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <Button /> </div> );

Try it »
Other Extensions