useState
これはReactの機能の一つで、画面上に表示する値(例えば、ユーザーが入力したテキストや選択したオプション)を管理する。
- メリット:値が変わると自動で画面が更新される。なので、ユーザーが何か操作をしたときに画面を更新するためには非常に便利!
(これにより、ステートに基づくUIの変更を簡単に実装することが可能。) - デメリット:値がよく変わると画面が頻繁に更新され、それがパソコンの負担になることがある。
useRef
これもReactの機能の一つだが、useStateとは違って、useRefが管理する値が変わっても画面は自動で更新されない。つまり、値を覚えておくだけの役割を果たす。
主に、画面上の特定の場所(例えば、ボタンやテキストボックス)を探すために使われる。
(頻繁に変更されるがそれによってUIが更新されない値を扱うのに便利!)
- メリット:値が変わっても画面は更新されないので、頻繁に値が変わるがそれにより画面を更新する必要がない場合に便利!
- デメリット:値が変わっても画面は自動で更新されないので、その値の変化に応じて何かをするためには別の方法を考える必要がある。
それぞれ適切な場面で使うことで、効率的にプログラムを作ることができる。
状態の変化に基づいてUIを動的に更新する必要がある場合にはuseStateを、再レンダリングに関係なく保持したい値を管理する場合にはuseRefを使用するなど使い分ける。