Reactのコンポーネントライフサイクルを深掘りする

作成日 2025.02.26
React
React

Reactコンポーネントライフサイクルは、コンポーネントが作成され、更新され、破棄されるまでの一連の流れを指します。本記事では、各フェーズと関連するメソッドやフックについて詳細に解説します。

1. 1. コンポーネントライフサイクルの概要
2. 2. マウントフェーズ
3. 3. 更新フェーズ
4. 4. アンマウントフェーズ
5. 5. useEffectの使い方
6. 6. useLayoutEffectの違い
7. 7. コンポーネントの初期化
8. 8. ライフサイクルメソッド (classコンポーネント)
9. 9. エラーハンドリング
10. 10. ライフサイクルのベストプラクティス
11. 11. React DevToolsでライフサイクルを分析
12. 12. まとめ

1. コンポーネントライフサイクルの概要

Reactコンポーネントには「マウント」「更新」「アンマウント」の3つの主要なライフサイクルフェーズがあります。

2. マウントフェーズ

コンポーネントがDOMに追加されるフェーズです。以下のメソッドやフックが使用されます。

useEffect(() => {
  console.log('Component Mounted');
}, []);
[/code]

**サンプルコード:**
[code]
function App() {
  useEffect(() => {
    console.log('App component mounted');
  }, []);

  return <h1>Hello, React!</h1>;
}

サンプルコード:

function App() {
  useEffect(() => {
    console.log('App component mounted');
  }, []);

  return <h1>Hello, React!</h1>;
}

3. 更新フェーズ

コンポーネントのpropsやstateが変更されたときに発生します。

useEffect(() => {
  console.log('Component Updated');
});

サンプルコード:

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

  useEffect(() => {
    console.log('Counter updated:', count);
  }, [count]);

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

4. アンマウントフェーズ

コンポーネントがDOMから削除されるときに実行される処理です。

useEffect(() => {
  return () => {
    console.log('Component Unmounted');
  };
}, []);

サンプルコード:

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);

    return () => {
      clearInterval(timer);
      console.log('Timer stopped');
    };
  }, []);

  return <p>Timer Component</p>;
}

5. useEffectの使い方

useEffectはマウント、更新、アンマウントのライフサイクルを制御する重要なフックです。

6. useLayoutEffectの違い

useLayoutEffectはDOMの変更が描画される前に同期的に実行されます。

サンプルコード:

useLayoutEffect(() => {
  console.log('useLayoutEffect executed');
})

7. コンポーネントの初期化

初期化処理はuseEffectやuseStateを使用して行います。

8. ライフサイクルメソッド (classコンポーネント)

componentDidMount、componentDidUpdate、componentWillUnmountが主なメソッドです。

サンプルコード:

class Example extends React.Component {
  componentDidMount() {
    console.log('Component Mounted');
  }

  componentDidUpdate() {
    console.log('Component Updated');
  }

  componentWillUnmount() {
    console.log('Component Unmounted');
  }

  render() {
    return <div>Hello from Class Component</div>;
  }
}

9. エラーハンドリング

Error Boundaryを使用して、コンポーネントのエラーをキャッチします。

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    return this.props.children;
  }
}