functional setState and props

Question

I know well why we need functional setState and how it works, e.g.

this.setState((prevState, props) => ...);

You get the previous state as a parameter as above.

However pay attention to props too in the arguments. Here I encountered explanation about the props in functional setState:

In addition, it also applies when the update depends on props. These can become stale as well when the received props from the parent component have changed before the asynchronous execution kicks. Therefore, the function in this.setState() gets as second argument the props.

However that explanation still doesn't click to me.

Can someone bring an example how the "props" could become stale? e.g. maybe a code snippet which demonstrates a bug when using this.props instead of "props" as specified in the arguments of the callback function which setState takes?

In other words I don't get why there is need for props argument in functional setState and would be nice to see an example why it is needed.

Answer 1

class Children extends React.Component {
  state = {
    initial: true,
  };

  onClick = () => {
    this.props.handler();
    console.log(this.state.initial, this.props.initial); // true true
    this.setState((state, props) => {
      console.log(state.initial, props.initial); // true false
      console.log(this.state.initial, this.props.initial); // true true
    });
  };
  render() {
    console.log("render children", this.state.initial, this.props.initial);
    return <div onClick={this.onClick}>Click me</div>
  }
}

class Hello extends React.Component {
  state = {
    initial: true,
  };

  handler = () => {
    this.setState({initial: false});
  }
  render() {
    console.log("render parent", this.state.initial);
    return <Children initial={this.state.initial} handler={this.handler} />
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

In this example, the children will call the handler which will change the parent state and update his own state. In the callback, you can see that props and this.props are different: props are the new values while this.props are stale.

Demo here