React フック 完全ガイド完全ガイド【2025年最新版】

🚀 はじめに

React フックは、関数コンポーネントで状態管理やライフサイクルメソッドを利用できるようにする強力な機能です。この記事では、React フックの基礎から応用までを網羅的に解説し、実践的なコード例とともに理解を深めます。React の状態管理に課題を感じている方や、関数コンポーネントの理解を深めたい方必見です。

📚 基礎知識

React フックは、React 16.8 で導入された新しい機能です。これにより、関数コンポーネントでも状態やライフサイクルメソッドを利用できるようになりました。これにより、コードの再利用性が向上し、コンポーネントの可読性が高まります。フックを使用するには、関数コンポーネントの先頭で `use` で始まる名前のフック関数を呼び出す必要があります。

useStateフック

useState フックは、関数コンポーネントで状態を管理するための最も基本的なフックです。状態の値を保持し、状態を更新するための関数を提供します。

import React, { useState } from 'react';

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

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

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

この例では、`useState(0)` は初期値を 0 として状態 `count` を作成します。`setCount` は `count` の値を更新するための関数です。

useEffectフック

useEffect フックは、コンポーネントのライフサイクルイベント（マウント、アップデート、アンマウント）を処理するために使用されます。副作用（データフェッチ、DOM操作、タイマー設定など）をコンポーネントの内部で実行できます。

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // 空の依存配列は、マウント時に一度だけ実行

  if (!data) {
    return 
Loading...
;
  }

  return (
    

      
Data:
      
{JSON.stringify(data, null, 2)}

  );

}
export default DataFetcher;


この例では、空の依存配列 `[]` を使用しているため、useEffect はコンポーネントのマウント時に一度だけ実行されます。依存配列を指定することで、useEffect の実行タイミングを制御できます。

useContextフック

useContext フックは、コンポーネントがコンテキストの値を消費できるようにします。これにより、props の受け渡しを介さずに、コンポーネント間でデータを共有できます。

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

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    
      

        Toggle Theme
        
      
    
  );
}

function Content() {
  const { theme } = useContext(ThemeContext);

  return (
    

      
Current theme: {theme}
    
  );
}

export default App;

この例では、`ThemeContext` を作成し、`App` コンポーネントで `ThemeContext.Provider` を使用してコンテキストの値を共有しています。`Content` コンポーネントでは、`useContext(ThemeContext)` を使用してコンテキストの値を取得しています。

useReducerフック

useReducer フックは、状態管理をより複雑なケースで利用する場合に役立ちます。状態の更新ロジックを reducer 関数にカプセル化し、状態の変更をより予測可能です。

import React, { useReducer } from 'react';

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

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

  return (
    

      
Count: {state.count}
       dispatch({ type: 'INCREMENT' })}>Increment
       dispatch({ type: 'DECREMENT' })}>Decrement
    
  );
}

export default CounterReducer;

この例では、`reducer` 関数が状態の更新ロジックを定義しています。`useReducer` フックは、`reducer` 関数と初期状態を受け取り、状態と dispatch 関数を返します。

useMemoフック

useMemo フックは、計算コストの高い関数の結果をメモ化するために使用されます。これにより、不必要な再計算を回避し、パフォーマンスを向上させることができます。

useCallbackフック

カスタムフック

パフォーマンス最適化

トラブルシューティング

まとめ