第2の料理/ReactのsetStateがワカラナイ

※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。

↑キレ味ってなんだ…?

昨日なんとなく焼きそばに飽きたので今日は鮭の炊き込みご飯を作った。これも僕のレパートリーの1つだが、ご飯を炊くのは時間がかかるので敬遠していた。

作り方はかんたんで、ご飯を炊くときに醤油・鮭・えのき・鮭を一緒に入れるだけだ。こだわるなら昆布も。炊き上がるころには部屋が醤油のいい香りに包まれている。

今日もReactのドキュメントを読んでいた。だいたい理解しながら読み進んでいるが、やはりReactがパフォーマンスを出すために中でゴニョゴニョやっていることを理解するのが難しい。たとえばここ。再描画の回数を減らすためにsetStateは即時に実行されないことがあるという。しかし例示されているコードでどのような不具合が起きる可能性があるのか、failの一言だけではよくわからない。

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

これの解決策としてsetStateに関数を渡すことで確実にsetStateが行われるタイミングでのpropsの値を取得する方法が紹介されているが、これによって何を解決しているのだろうか。

“第2の料理/ReactのsetStateがワカラナイ” への2件の返信

  1. this.stateの値は非同期的に更新されるので、最新の値とは限らない。なので、this.state.counterも古いカウンタ値の場合がある。古いカウンタ値に基づいてカウントアップした値をsetしてしまうと10回カウントアップボタンを連打しても10カウントアップしないみたいなことが起きる

    たぶん

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です