ReactのuseStateを使ってみる

ReactのuseStateについて簡単にまとめてみます。

state・useStateについて

Reactのコンポーネント内で管理されるデータや状態のことをstateと呼び、その値が変わると自動的にUIが再レンダリングされるような仕組みが用意されています。
stateの例としては、ボタンのクリック毎にカウントアップしていくカウンターの値や、フォームに入力すると画面内の一部が更新される値などがあります。

useStateは、コンポーネント内でstateを管理するために使われるReactのフックです。

サンプルコード

例として、フォーム入力された数値の2倍をページ上に表示する実装で試してみます。
まずはうまくいかない例(useStateを使用しない例)です。

export default function Calculate() {
  let result;

  function handleChange(e) {
    const value = e.target.value;
    result = value * 2;
  }

  return (
    <div>
      <input
        type="number"
        onChange={handleChange}
      />
      <div>2倍の値:{result}</div>
    </div>
  )
}

onChangeイベントでresultの値を入力値の2倍に変更していますが、ページの表示には反映されません。
変数resultの値の変更はされていますが、その変更内容を元に再レンダリングがされていないためです。
うまくいかない場合のデモページ

次にuseStateを使ってみます。
useStateの定義は以下のように行います。

const [state, setState] = useState(initialState)

useState()の引数にはstateの初期値となる値を指定します。
また返り値は分割代入を利用して受け取っていて、1つ目が現在のstate変数で、2つ目がstate更新と再レンダリングを行う関数になります。

import { useState } from 'react';

export default function Calculate() {
  const [result, setResult] = useState(0);

  function handleChange(e) {
    const value = e.target.value;
    setResult(value * 2);
  }

  return (
    <div>
      <input
        type="number"
        onChange={handleChange}
      />
      <div>2倍の値:{result}</div>
    </div>
  )
}

1行目でuseStateをインポートした上で、4行目でuseStateの定義、8行目でstateの更新を行っています。
useStateを使用するデモページ

stateはコンポーネント内で独立しているため、他のコンポーネントには影響しません。
例えば前述のコンポーネントを以下のように2つ読み込み、片方のstateを変更した場合、もう一方のstateには影響がありません。

<Calculate />
<Calculate />

複数コンポーネントを読み込むデモページ