useStateは、Reactの最も基本的で最も重要なフックであり、FunctionalComponentに状態変数を設定することで状態を管理できます。

useStateフックについて詳しく説明する前に、まず、useStateだけでなく、ほとんどすべてのフックに適用されるフックの基本といくつかの落とし穴について説明します。

それで、フックとは何ですか？名前が示すように、フックはReact機能に「フック」できる特別な機能です。関数コンポーネントを記述し、状態を追加または変更する必要がある場合は、フックを使用するだけです（以前はクラスコンポーネントに変換してthis.stateを使用する必要がありました）。したがって、基本的にフックはクラス内では機能せず、クラスを作成する代わりにフックを使用します。フックを書くときに覚えておくべきいくつかのルール：

1. フックは常に機能コンポーネント内に記述されます。
2. フックは、すべてのコンポーネントのレンダリングでまったく同じ順序で呼び出す必要があります。

それでは、useStateフックとその使用方法について説明しましょう。

useStateの宣言

まず、このようにuseStateをインポートする必要があります。

初期状態の作成

useStateは、初期のデフォルト状態を引数として渡される関数であり、2つのエントリを持つ配列を返します。配列の最初のエントリは現在の状態であり、2番目のエントリは状態を更新できるようにするメソッド（関数）です。

useStateから返される配列を簡単に分割するために、このようなデストラクチャリングを使用しています。

オブジェクトを引数としてuseStateに渡すこともできますが、関数コンポーネントで複数のuseStateを使用できるため、状態ごとに個別のuseStateフックを設定する方がはるかに一般的です。

状態の更新

useStateによって返される2番目の要素は、状態変数を更新するために新しい値を受け取る関数です。

これは、ボタンを使用してクリックするたびに状態（カウント）を更新する例です:(ここで試す）

prevStateを使用して状態を更新することにより、前の値を受け取り、新しい値を返す関数を渡します。しかし、状態を更新するために状態を直接渡すことができたと思われるかもしれません。この例では、大きな違いはありませんが、状態を更新する方法は間違っています。理由は次のとおりです。

（ここで試してください）

これは、カウント値が関数をレンダリングするときのカウントの値にすぎないためです。デフォルト値0を設定しているため、常に1が表示されます。基本的に、これらは相互にオーバーライドされます。

set関数の2番目のバージョンでは、前の値をとる関数を渡すことができます。したがって、レンダリングするたびに、前の値が渡され、カウンターが3回インクリメントされます。

useStateの関数バージョン

useStateは、値の代わりに関数を引数として使用することもでき、その関数は、コンポーネントが最初にレンダリングされたときにのみ実行されます。

結論

useStateは、関数コンポーネントに状態変数を含めることができるフック（関数）です。この関数に初期状態を渡すと、現在の状態値（必ずしも初期状態である必要はありません）を含む変数と、この値を更新するための別の関数が返されます。覚えておくべきいくつかのポイントは、useStateから始めるのが良いでしょう。