useState()フック vs クラスコンポーネント：Reactにおける状態管理のベストプラクティス

2024-04-02

ReactにおけるuseState()フックとは？

従来のクラスコンポーネントでは、this.state オブジェクトを使って状態を管理していました。一方、関数コンポーネントには this キーワードが存在しないため、useState() フックを使って状態を管理する必要があります。

useState() フックは、以下の2つの引数を受け取ります。

初期値: 最初の状態の値
状態更新関数: 状態を更新するための関数

useState() フックは、現在の状態と状態更新関数のペアを返します。

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

// 状態の読み込み
console.log(count); // 0

// 状態の更新
setCount(count + 1);

// 状態の読み込み
console.log(count); // 1

上記の例では、useState() フックを使って count という状態変数を初期値 0 で作成しています。setCount 関数は、count の値を更新するために使用されます。

useState() フックを使うことで、以下の利点があります。

コードが簡潔になる
状態の管理が容易になる
テストが容易になる

状態更新関数は常に最新の状態に基づいて呼び出す必要がある

useState() フックは、Reactの関数コンポーネントで状態を管理するための最も重要なフックの一つです。使い方を理解すれば、コードを簡潔に、状態管理を容易に、テストを容易にすることができます。

カウントアップボタン

import React, { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleClick}>カウントアップ</button>
    </div>
  );
};

export default App;

入力フォーム

以下のコードは、useState() フックを使って入力フォームを作成する例です。

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <p>名前: {name}</p>
      <input type="text" value={name} onChange={handleChange} />
    </div>
  );
};

export default App;

Todoリスト

import React, { useState, useEffect } from "react";

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const savedTodos = localStorage.getItem("todos");
    if (savedTodos) {
      setTodos(JSON.parse(savedTodos));
    }
  }, []);

  const handleAddTodo = () => {
    const newTodo = {
      text: "",
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const handleToggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>Todoリスト</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggleTodo(index)}
            />
            {todo.text}
          </li>
        ))}
      </ul>
      <button onClick={handleAddTodo}>Todoを追加</button>
    </div>
  );
};

export default App;