React Hooks ∋ useState

コンポーネント内部の状態を持つ為に使います。この関数は初期値を引数として渡せ、現在値と更新用の関数を返します。

以下は例です。

const [hidden, setHidden] = useState(false);

hidden値とsetHidden関数を得ます。単にこれは分割代入なので名前は適当に決めます。

定義した直後hiddenは引数として渡したfalseが入ります。この値をtrueにするにはsetHidden関数に次の値を渡して実行します。

setHidden(true);

更新用の関数は、引数に関数を取ることもできます。引数の関数には現在値が渡されて実行され、戻り値が次の現在値になります。なので、以下のようにも書けます。

setHidden(state => !state)

値を更新すると、コンポーネントの状態を更新したという事になるので、このフックを持つコンポーネントは再描画されます。