React Hooks 完全ガイド

React Hooks は、関数コンポーネントで state 管理や副作用処理を行うための強力な機能です。この記事では、基本的な Hooks から応用まで詳しく解説します。

useState：状態管理の基本

useStateは最も基本的な Hook で、コンポーネントに状態を追加できます。

import React, { useState } from "react";

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

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

useEffect：副作用の処理

useEffectは、データフェッチや DOM 操作などの副作用を処理するための Hook です。

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error("ユーザー情報の取得に失敗しました:", error);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]); // userIdが変更されたときに再実行

  if (loading) return <div>読み込み中...</div>;
  if (!user) return <div>ユーザーが見つかりません</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

カスタム Hooks：ロジックの再利用

カスタム Hooks を作成することで、コンポーネント間でロジックを再利用できます。

// useLocalStorage カスタムHook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error("LocalStorageへの保存に失敗しました:", error);
    }
  };

  return [storedValue, setValue];
}

// 使用例
function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "light");

  return (
    <div>
      <p>現在のテーマ: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        テーマを切り替え
      </button>
    </div>
  );
}

パフォーマンス最適化

useMemo

重い計算処理をメモ化してパフォーマンスを向上させます。

import React, { useMemo } from "react";

function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter((item) =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  return (
    <ul>
      {filteredItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

useCallback

関数をメモ化して不要な再レンダリングを防ぎます。

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

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

  const addTodo = useCallback((text) => {
    setTodos((prev) => [...prev, { id: Date.now(), text, completed: false }]);
  }, []);

  const toggleTodo = useCallback((id) => {
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }, []);

  return (
    <div>
      <TodoForm onAdd={addTodo} />
      <TodoItems todos={todos} onToggle={toggleTodo} />
    </div>
  );
}

まとめ

React Hooks は、関数コンポーネントでの状態管理と副作用処理を強力にサポートします。適切に使用することで、コードの可読性と保守性を大幅に向上させることができます。

パフォーマンス最適化のための Hooks も活用して、ユーザー体験の向上を目指しましょう。