useStateをもう少し詳しく理解しよう
こちらの記事で、useStateを使ってStateを管理する基本的な方法について学びました。
今回は、useStateについてもう少し詳しく見ていきましょう。
useStateはシンプルに見えますが、Stateを更新するときには少し注意が必要です。
ReactではStateの更新について少し独特な仕組みがあります。
この記事では、
- Stateを更新した直後の値はどうなるのか
- 現在のStateを使って更新する方法
- Stateを複数回更新するときの注意点
- Stateを変更すると、なぜ画面が更新されるのか
といった内容を、実際のコードを見ながら理解していきましょう。
Stateを更新するときの注意点
ここからは、useStateについてもう少し詳しく見ていきましょう。
初心者がつまずきやすいポイントの一つが、
Stateを更新した瞬間に、その場のStateの値が書き換わるわけではない
ということです。
例えば、次のコードを考えてみます。
setCount(count + 1);
console.log(count);setCount()を呼び出しているので、
その直後のconsole.log()では、増えた値が表示されるはず
と普通の感覚では思うと思います。
しかし、そうとは限りません。
setCount()は、その場でcountという変数を書き換えるものではありません。
Reactに、
次のレンダー(描画)では、このStateをこの値にしてください
と伝えるイメージです。
大まかな流れとしては、
setCount()を呼び出す- ReactにStateの更新を伝える
- コンポーネントが再レンダーされる
- 新しいStateが反映される
となります。
そのため、再描画前であれば
setCount(count + 1);
console.log(count);では、console.log()が更新前の値を表示します。
現在のStateを使って更新するには？
では、
現在のStateに1を足したい
という処理を確実に行いたい場合はどうすればよいのでしょうか？
この場合は、関数形式でStateを更新する方法があります。
setCount(prevCount => prevCount + 1);ここで、prevCountには、更新前のStateの値が渡されます。
つまり、
setCount(prevCount => prevCount + 1);は、
現在の値に1を足した値を、次のStateにしてください
というイメージです。
複数回Stateを更新するとき
この方法が特に役立つのが、Stateを複数回更新するときです。
例えば、
setCount(count + 1);
setCount(count + 1);と書いた場合です。
2回呼び出しているので、
2増えるのでは？
と思うかもしれません。
しかし、この書き方では、同じcountをもとに更新しようとするため、期待した結果にならないことがあります。
このような場合は、
setCount(prev => prev + 1);
setCount(prev => prev + 1);とします。
この場合、それぞれの更新が前の更新結果をもとに行われます。
そのため、
- 1回目 → +1
- 2回目 → さらに+1
と更新できます。
ここでは細かい仕組みまで覚える必要はありません。
まずは、
現在のStateをもとに次の値を計算したいときは、関数形式で更新する
と覚えておきましょう。
Reactでは「Stateを変更して画面を更新する」
最後に、今回学んだ内容をReactの基本的な考え方につなげてみましょう。
通常のJavaScriptでは、DOMを直接操作して画面を書き換えることがあります。
例えば、
document.getElementById("count").textContent = count;のような処理です。
開発者がHTMLの要素を取得して、
この部分をこの値に変更してください
と直接指示しています。
一方、Reactでは、Stateを変更することが基本になります。
例えば、
setCount(count + 1);とします。
するとReactがStateの変更をもとにコンポーネントを再レンダーし、画面を更新します。
イメージとしては、
- Stateを変更する
- Reactが再レンダーする
- 画面が更新される
です。
これがReactを理解するうえで、とても重要な考え方です。
まとめ
今回は、useStateについてもう少し詳しく見ていきました。
Stateを更新するときは、setCount()を呼び出したその場でStateの値が書き換わるわけではありません。
ReactにStateの更新を伝えると、その後のレンダーで新しいStateが反映されます。
また、現在のStateをもとに次の値を計算したい場合は、
setCount(prevCount => prevCount + 1);のような関数形式でStateを更新できます。
特に、Stateを複数回更新するときには、この書き方が役立ちます。
そして、Reactでは、
Stateを変更する → Reactが再レンダーする → 画面が更新される
という流れが基本的な考え方になります。
まずは、「ReactではStateを変更することで、画面の更新につながる」ということを覚えておきましょう。
次回は、useEffectの依存配列について詳しく見ていきます。
[]や[id]にはどんな意味があるのか、useEffectがいつ実行されるのかを理解していきましょう。
コメント