useStateについて知る

はじめに

前回の記事にてuseMemoについて解説する記事を投稿しましたが、記事内でusetateを使用していたためuseStateについても解説する必要があると思い、今回記事を執筆するに至りました。
私自身、学習する立場のものですので誤植や間違いがあると指摘していただければ幸いです。

useStateとは

useStateとは関数コンポーネント内で状態を管理するためのhooksになります。

const [state, setState] = useState(initialState);

useStateを用いる際には上記のような記述をします。定義した配列の最初の要素(ここではstate)が現在の状態、2番目の要素がstateを更新するための関数になっています。
initialStateはstateに格納される初期値となっています。
javascriptでは型推論されるので、initialStateがtrueやfalseの値であればstateの型はbooleanの型が当てはめられます。もちろん配列や文字列などその他の型も適用できます。

また、例ではstate,setStateとなっていますが、

const [a, setA] = useState(initialState);

のように任意の変数名を使用しても問題ありません。しかし、公式が推奨する命名規則として「状態名＋set状態名」というセットで用いることが推奨されています。

サンプル

以下にuseStateを用いた簡単なサンプルコンポーネントを示します。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count} 回押したよ</p>
      <button onClick={() => setCount(count + 1)}>
        押してね
      </button>
    </div>
  );
}

export default Counter;

ボタンを押すとjsx内の{count}が押した回数増えていくことが確認できると思います。

また

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count} 回押したよ</p>
- <button onClick={() => setCount(count + 1)}>
+ <button onClick={() => setCount(prevState => prevState + 1)}>
        押してね
      </button>
    </div>
  );
}

export default Counter;

のように現在の状態を示すstateをprevStateとして引数に取る関数を渡せます。

また以下のようにオブジェクトや配列を管理することもできます。

const [person, setPerson] = useState({ name: 'Shinji', age: 16 });

setUser(prevUser => ({ ...prevUser, age: 17 }));

※setstateの呼び出しは非同期であるため、即刻更新したstateの値が反映されるわけではないので、値が更新されていないなど後工程で予期しない動作をすることがあるかもしれません。

参考文献

[useState - React] https://ja.react.dev/reference/react/useState