React Hooks徹底解説：useStateとuseEffectの使いこなし方

作成日 2025.02.17
React
React

React Hooksは、Reactのコンポーネントに状態やライフサイクル機能を追加するための仕組みです。特にuseStateとuseEffectは、ほとんどのReactアプリケーションで頻繁に使用されます。本記事では、これらのフックを効果的に使いこなす方法を解説します。

1. 1. useStateとは
2. 2. useEffectとは
3. 3. useStateの初期値
4. 4. useEffectの依存配列
5. 5. useEffectのクリーンアップ
6. 6. useStateとオブジェクトの状態管理
7. 7. useEffectの実行タイミング
8. 8. useStateのコールバック関数
9. 9. useEffectと非同期処理
10. 10. useStateとuseEffectの組み合わせ
11. 11. 実際の使用例
12. 12. まとめ

1. useStateとは

useStateは、関数コンポーネントに状態を追加するためのフックです。

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. useEffectとは

useEffectは、副作用（サイドエフェクト）を処理するためのフックです。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Timer: {count}</p>;
}

3. useStateの初期値

useStateの初期値は、直接値を渡すか、関数で遅延初期化できます。

const [state, setState] = useState(() => {
  return expensiveComputation();
});

4. useEffectの依存配列

useEffectは依存配列に基づいて再実行されます。

useEffect(() => {
  console.log('Count changed');
}, [count]);

5. useEffectのクリーンアップ

useEffect内でリソースを解放するためにクリーンアップ関数を返すことができます。

useEffect(() => {
  const subscription = subscribeToData();
  return () => subscription.unsubscribe();
}, []);

6. useStateとオブジェクトの状態管理

オブジェクトの状態を管理する場合は、スプレッド構文を使用します。

const [form, setForm] = useState({ name: '', email: '' });

function updateName(e) {
  setForm({ ...form, name: e.target.value });
}

7. useEffectの実行タイミング

useEffectは初回レンダリング後、依存関係が変更されたときに実行されます。

8. useStateのコールバック関数

setStateは、現在の状態に基づく新しい状態を計算するコールバックを受け入れます。

setCount((prevCount) => prevCount + 1);

9. useEffectと非同期処理

useEffect内で非同期関数を使う際は注意が必要です。

useEffect(() => {
  async function fetchData() {
    const data = await fetchSomeData();
    console.log(data);
  }
  fetchData();
}, []);

10. useStateとuseEffectの組み合わせ

useStateとuseEffectを組み合わせることで、柔軟な状態管理が可能です。

11. 実際の使用例

useStateとuseEffectを組み合わせた実際の例を示します。

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>Increment</button>
  );
}