React Hooks完全ガイド｜useState・useEffect・useContextの使い方

React Hooksは関数コンポーネントで状態管理や副作用を扱うための仕組みです。2019年のHooks導入後、Reactの書き方が大きく変わりました。

なぜHooksを使うのか？

• クラスコンポーネントよりシンプルにコードが書ける
• ロジックの再利用がカスタムHooksで簡単にできる
• React公式が推奨する現代的な書き方

useState - 状態管理の基本

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初期値0
  
  return (
    

      
カウント: {count}
       setCount(count + 1)}>+1
       setCount(count - 1)}>-1
       setCount(0)}>リセット
    
  );
}

// オブジェクトの状態管理
const [user, setUser] = useState({ name: '', age: 0 });
setUser(prev => ({ ...prev, name: '太郎' })); // スプレッドで更新

useEffect - 副作用の処理

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // コンポーネントのマウント時・userId変更時に実行
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
    
    // クリーンアップ関数（アンマウント時に実行）
    return () => {
      // タイマーやサブスクリプションのクリーンアップ
    };
  }, [userId]); // 依存配列：usreIdが変わった時だけ再実行
  
  if (!user) return 
Loading...
;
  return 
{user.name}
;
}

useContext - グローバルな状態共有

import { createContext, useContext, useState } from 'react';

// テーマContext作成
const ThemeContext = createContext('light');

// Providerで子コンポーネントに提供
function App() {
  const [theme, setTheme] = useState('light');
  return (
    
      

      

    
  );
}

// 深くネストしたコンポーネントでも直接取得
function Button() {
  const { theme, setTheme } = useContext(ThemeContext);
  return  setTheme(theme === 'light' ? 'dark' : 'light')}>
    現在: {theme}
  ;
}

useReducer - 複雑な状態管理

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    case 'RESET': return { count: 0 };
    default: return state;
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    

      
{state.count}
       dispatch({ type: 'INCREMENT' })}>+
    
  );
}

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

// useFetch カスタムHook
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => { setData(data); setLoading(false); })
      .catch(err => { setError(err); setLoading(false); });
  }, [url]);
  
  return { data, loading, error };
}

// 使い方
function UserList() {
  const { data, loading, error } = useFetch('/api/users');
  if (loading) return 
Loading...
;
  if (error) return 
Error!
;
  return 
{data.map(user => 
{user.name}
)}
;
}

まとめ

React HooksはuseState→useEffect→useContext→カスタムHooksの順で習得するのが最短ルートです。実際のプロジェクトで手を動かしながら覚えましょう。