React useStateのset関数の役割を改めて理解してみる
Reactの話です。useStateのset関数を実装で使うことはできても、どんな仕組みで、なぜuseStateが使えるのか理解できていない部分があったので、自分なりに学習しなおしたことをまとめてみます。
React初心者のつまずきの記録なので、他の初心者の方の参考になったら嬉しいです。
結論から言うと、set関数が再レンダリングのトリガーになっていることを理解できていませんでした。
そもそも、画面が変更されるために必要な処理とは
useStateを使うと、たとえばこんな機能を作ることができます。
このように画面が入力内容に応じて変更されるためには、どのような処理が必要でしょうか？
画面が変更されるために必要な処理
①変更した値をどこかに保持する
②Reactにコンポーネントの再実行（再レンダリング）を依頼し、新しいReact要素を作成してもらう
今回の例でいうと、
①入力された「Paul」「Smith」という値をどこかに保持すること
②保持した値「Paul」「Smith」をもとに、新しいReact要素を作成してもらう = 画面に反映されるようにすること
これらを可能にするのが、 useStateです。
理解できていなかった点
set関数が再レンダリングのトリガーになっていることを理解していませんでした。
useStateのset関数が、保持しているstateの値を更新すること（①）は理解していました。しかし、それだけではなく、Reactに対して「コンポーネントを再実行してください = 再レンダリングしてください」という指示を送っていること（②）は理解できていませんでした。
よく考えてみれば、値を更新しても、更新された値が画面に反映されていなければ意味がありません。値の変更が画面に反映されて、初めてset関数は役割を果たすことができます。
理解した上で改めてReact公式ドキュメントのset関数の説明を見てみます。
useState が返す set 関数を利用して、state を別の値に更新し、再レンダーをトリガすることができます。
https://ja.react.dev/reference/react/useState#setstate
たしかに「再レンダーをトリガすることができる」と記載があります。
初めてuseStateに触れたときは、ぼんやりとした理解のまま通り過ぎてしまった部分でした。
参考
【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript
Discussion