React 16 setState method clarification

user_3926471 0
Viewed 1358

I was reading the react 16 features. I stuck on the below point. can anyone please clarify the below point.

setState callbacks (second argument) now fire immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.

What will be the difference when below code executes in both version of react i.e < 16 and 16.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {name: 'default'}
  }

  changeState() {
    this.setState({name: 'shubham'}, ()=> this.callbackSuccess())
  }

  callbackSuccess() {
    console.log('call back success');
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Child1 name={`fromchild 1 ${this.state.name}`}/>
        <Child2 name={`fromchild 2 ${this.state.name}`}/>
        <Child3 name={`fromchild 3 ${this.state.name}`}/>
        <p className="App-intro" onClick={() => this.changeState()}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('component did update prevprops',prevProps)
    console.log('component did update prevState',prevState)
  }

  componentDidMount(prevProps, prevState) {
    console.log('component did mount')
  }

}

class Child1 extends Component {
  render() {
    console.log('child1 render')
    const {name} = this.props;
    return (<h1> from child1 {name}</h1>)
  }
}

class Child2 extends Component {
  render() {
    console.log('child2 render')
    const {name} = this.props;
    return (<h1> from child2 {name}</h1>)
  }
}

class Child3 extends Component {
  render() {
    console.log('child3 render')
    const {name} = this.props;
    return (<h1> from child3 {name}</h1>)
  }
}

export default App;
reactjs
1 Answers

From React 16, the parent component mount is not dependent on the child components mount.

Before React 16, componentDidMount (respec. componentDidUpdate) would fire for a parent component only after all child components have fired their componentDidMount (respec. componentDidUpdate) .

Also, remember, the setState callback ( 2nd argument ) is executed after re-rending which a responsibility of the lifecycle method componentDidUpdate.

If this is clear, componentDidUpdate ( or the callback of setState) are independent between parent component and its children. That's why:

setState callbacks (second argument) now fire immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.

"after all components have rendered" ,means : after all child components have rendered.

Apply that for your example :

Your example is useless to demonstrate the difference between ( >React 16 ) and (< React 16) in the related point . Indeed, child components are stateless even you are implementing it using class not function. In other words, child components of your example does not include neither componentDidMount, componentDidUpdate nor setState with 2nd arg callback.

user_7475790
Related