![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/09/25
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、ReactのuseStateについて説明します。
React Hooksとは
React Hooksが登場するまでは、
クラスコンポーネントで状態管理をする必要があった。
React Hooksは、React16.8で追加された新機能で、
クラスを使うことなくReactのstateを管理できたり、
ライフサイクルに応じた処理を実装したりできる機能。
クラスを使うことなくReactのstateを管理できたり、
ライフサイクルに応じた処理を実装したりできる機能。
React Hooksを活用すると、簡潔で読みやすいコードを記述できる。
propsとは
propsとは、関数コンポーネントに渡す引数のようなもの。
コンポーネントは受け取ったpropsに応じて、
表示するスタイルや内容を変化させることが可能。
上記例では、受け取ったpropsによって
表示する色を変化させている。
propsの受け渡しがない場合は、
初期値のblackとなっている。
useStateとは
useStateは、関数コンポーネントでStateを管理するためのHooksで、
最も利用される基本のHooks。
stateとはコンポーネントの「状態」を表す値で、
propsと異なり、後から変更することができる。
関数コンポーネントで、useStateを利用するためには、
importする必要がある。
useState関数の返却値は、配列の形となっている。
配列の1つ目がstate変数で、
配列の2つ目がset関数
(stateを更新するための関数)
となっており、任意の名前を付けることができる。
useStateは関数なので使用する際は
()をつけて関数を実行する。
名称は自由につけることができるが、
下記例のように、countであればわかりやすいように、
設定したstate変数の前にsetをつけて、setCountとする。
＊「set + state変数」とし、単語の区切りは大文字にする。
（ローワーキャメルケース記法）
stateの値を変更させるときは、set関数を使用して状態を更新する。
上記例は、ボタン押下時に、set関数でstateの値を＋１している。
このように記述してもカウントアップするが、
この処理を応用し、＋２をしようとするが、
思った挙動にならない。
＋２にならない理由は、
set関数で更新した値は即時に実行されるのではなく、
再レンダリングされる際に
変更差分をまとめて更新するため、
実際にはこのような状態となっている。
そのためset関数内で関数を使い
更新するようにする。
ここまで読み進めていただきありがとうございます。
