setStateの非同期属性、prevState、prevProps

## Asynchronous
setState()は非同期で動作します.
つまり、setStateに変更したstate値はすぐには有効になりません.
vscodeからマウスカーソルを離すと、次のコールバックが表示されます.

// index.js
ReactDOM.render(
  <React.StrictMode>
    <App increment={1} />
  </React.StrictMode>,
  document.getElementById('root')
);
 
 
// App.js
class App extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      count: 30 + this.props.increment,
    };
  }
  handleClick = () => {
      this.setState((prevState, prevProps) => {
        return { count: prevState.count + prevProps.increment }
      },
      () => console.log("callback", this.state.count))
      console.log("out of setState", this.state.count);
  }
 
  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Update State</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

コンソールに「callback」と「out of setState」をそれぞれ出力してみます.


UpdateStateボタンを押すと、目にカウントが増えたように見えます.
ただし、consoleではcallback内の部分に変更後の値がすぐに適用され、外部の部分は遅くなります.
prevState, prevProps
その名の通り、前の状態、前のpropsを表す.
setStateでこの変数を使用する場合は、上記のサンプルコードに示すように、HandleClickでthisを使用します.stateはprevState、thisです.propsはprevPropsで代用できます.