React HooksのuseStateの使用方法と注意点

2023年 9月 4日

useStateとは

useStateはReactのフック（Hooks）の一つであり、関数コンポーネント内で状態（state）を管理するために使用されます。useStateを使用すると、コンポーネントの動作や表示を変更することができます。例えば、ボタンがクリックされた回数を表示したり、入力フォームの内容を動的に変更したりできます。

基本的な構文

基本的な構文は以下のようになります。

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

state: 現在の状態を保持する変数です。
setState: stateを更新するための関数です。引数に値を取得し、stateに値を返します。
initialState: stateの初期値です。数値、文字列、配列形式など値は自由です。

応用
useEffectのコールバック関数内から値を外部に返す時は、setStateを使用して値を設定できます。そして、その値はstateからアクセスできます。

動作の流れ

useStateを呼び出し、初期値を設定します。
Reactはこの状態を内部で管理し、コンポーネントが再レンダリングされるときに最新の状態を利用します。
setState関数を呼び出すと、Reactは新しい状態を内部で設定し、関連するコンポーネントを再レンダリングします。

useStateの引数

useStateは初期値を引数として受け取ることができます。この初期値はstateの初期値として設定され、後からsetState関数で更新できます。初期値の型は非常に柔軟で、数値、文字列、オブジェクト、配列、null、undefined、関数など、JavaScriptの任意の値を設定できます。

const [count, setCount] = useState(0);  // 数値
const [name, setName] = useState("John");  // 文字列
const [user, setUser] = useState({ firstName: "John", lastName: "Doe" });  // オブジェクト
const [items, setItems] = useState([]);  // 配列

useStateの使用例

useStateは非常に多用されるフックですので、以下に具体的な使用例をいくつか示します。

カウンターアプリ

この例では、単純なカウンター機能を持つアプリケーションを作成します。ユーザーがボタンをクリックするたびにカウントが増減します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
      <button onClick={() => setCount(count - 1)}>減少</button>
    </div>
  );
}

TODOリストアプリ

次の例では、TODOリストを動的に管理するアプリケーションを作成します。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map((todo, index) => <li key={index}>{todo}</li>)}
      </ul>
    </div>
  );
}

メリット

簡易性: useStateは関数コンポーネントにおいて状態を簡単に管理する手段を提供します。それによって、クラスコンポーネントを使用する必要がなくなり、よりシンプルなコードが書けます。
最適化された再レンダリング: useStateはコンポーネントの一部だけを効率的に再レンダリングするため、パフォーマンスが向上します。
テスタビリティ: 状態管理が関数コンポーネント内に閉じられているため、テストがしやすいです。

デメリット

クラスコンポーネントとの違い: useStateはクラスコンポーネントで使用されるthis.setStateとは異なる場合があり、それに慣れる必要があります。
非同期的な更新: setStateは非同期に状態を更新するので、直後に状態が更新されたかどうかを確認することはできません。これは、複数のsetStateを連続して呼び出すと予期せぬ動作を引き起こす可能性があります。
複雑性: 状態が複雑になると、それに伴い管理も複雑になる可能性があります。特に、複数の状態が依存関係を持っている場合、その管理が煩雑になることがあります。

以上がuseStateについての詳細な解説と使用例です。このフックはReactの基本的な概念であり、多くのプロジェクトで頻繁に使用されます。理解と習熟が進めば、より高度な状態管理も可能になります。