React の useEffect を理解する: ゼロからヒーローまで

React は、動的なユーザー インターフェイスを構築するための最も人気のある JavaScript ライブラリの 1 つになりました。 React で最も重要なフックの 1 つは useEffect で、開発者はこれを使用して機能コンポーネントの副作用を管理できます。副作用には、データの取得、サブスクリプションの設定、DOM の手動操作などの操作が含まれます。このブログでは、useEffect とは何か、それがどのように機能するのかを詳しく説明し、理解を深めるために段階的な例を示します。

useEffectとは何ですか?

React では、useEffect は関数コンポーネントで副作用を実行できるようにする組み込みフックです。名前が示すように、副作用は、API 呼び出し、タイマー、ロギング、DOM の更新など、関数の外部に影響を与える操作です。

React 16.8 でフックが導入される前は、副作用を処理するためにクラス コンポーネントと、componentDidMount、componentDidUpdate、componentWillUnmount などのライフサイクル メソッドを使用する必要がありました。 useEffect を使用すると、これらのライフサイクル イベントが機能コンポーネントの 1 つの関数に結合されます。

useEffect を選ぶ理由

useEffect は、いくつかの理由から React で副作用を管理するための強力なフックです。

1. コードの簡素化: クラスベースのコンポーネントとライフサイクル メソッドの必要性がなくなり、よりクリーンな関数ベースのコードを作成できるようになります。
2. 一元化された副作用: データの取得や DOM の更新などのすべての副作用を 1 か所で管理できます。
3. 可読性の向上: ライフサイクル イベントの管理方法が合理化され、コードがより読みやすくなり、複雑さが軽減されます。
4. 柔軟性: useEffect を使用すると、エフェクトをいつ実行するかを決定する依存関係を定義できるため、副作用を実行するタイミングと頻度をより詳細に制御できます。

仕組みは?

useEffect フックは 2 つの引数を受け入れます:

1. 効果関数: この関数には、データのフェッチやサブスクリプションの設定などの副作用ロジックが含まれています。
2. Dependency array (optional): エフェクトをいつ再実行するかを決定する値の配列。依存関係配列内の値が変更されると、エフェクトが再度実行されます。この配列を省略した場合、エフェクトはレンダリングのたびに実行されます。

基本的な構造は次のとおりです:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

例：

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

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

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

この例では、コンポーネントが最初にレンダリングされるときに API からデータが取得され、結果が UI に表示されます。空の依存関係配列を渡すため、このエフェクトは最初のレンダリング後に 1 回だけ実行されます。

useEffect での副作用の制御

useEffect の実行時期を制御することで、パフォーマンスを最適化し、副作用が正しいタイミングで発生するようにすることができます。

クリーンアップなしの効果

すべてのエフェクトがクリーンアップを必要とするわけではありません。クリーンアップは、タイマーのクリアやデータ ストリームのサブスクライブ解除など、エフェクトの実行後に何かを削除またはリセットする必要がある場合にのみ必要です。

たとえば、クリーンアップが必要ないシナリオは次のとおりです:

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

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

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

この場合、カウント状態が変化するたびにエフェクトがかかります。サブスクリプションを設定したり、外部リソースを管理したりしないため、クリーンアップは必要ありません。

クリーンアップによるエフェクト

エフェクトにサブスクリプションやタイマーの設定が含まれる場合は、エフェクトの後にクリーンアップする必要がある可能性があります。たとえば、タイマーを設定するシナリオを想像してください:

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

何が起こっているかは次のとおりです:

1. setInterval 関数は、時間を 1 秒ごとに増加させるタイマーを設定します。
2. クリーンアップ関数 (useEffect によって返される) は、コンポーネントがアンマウントされるときに間隔をクリアします。これにより、コンポーネントが削除された後もタイマーが実行され続けることがなくなります。

使用例効果シナリオ

useEffect が特に役立つ一般的なシナリオをいくつか見てみましょう。

コンポーネントマウント時のデータの取得

コンポーネントのマウント時にデータを取得することは、useEffect の最も一般的な使用例の 1 つです。

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

DOM の更新

レンダリング後に useEffect を使用して DOM を手動で操作できますが、React は DOM を効率的に管理するため、これは慎重に行う必要があります。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

コンポーネントのアンマウント時のクリーンアップ

クリーンアップする必要があるサブスクリプションやイベント リスナーなどのリソースがある場合は、useEffect の return 関数を使用してこれを処理できます。

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

よくある質問

1. useEffect で依存関係配列を省略するとどうなりますか?

依存関係配列を省略した場合、useEffect はレンダリングのたびに実行され、API 呼び出しなどの高価な副作用によりパフォーマンスの問題が発生する可能性があります。

2. useEffect は 1 回だけ実行できますか?

はい、空の依存関係配列 [] を渡すと、コンポーネントのマウント後にエフェクトが 1 回だけ実行されるようになります。

3. useEffect のクリーンアップ関数とは何ですか?

クリーンアップ関数は、コンポーネントがアンマウントされるとき、またはエフェクトが再度実行される前にエフェクトを元に戻す方法です。これは、タイマー、イベント リスナー、またはサブスクリプションをクリーンアップするのに役立ちます。

結論として、useEffect は React での副作用の管理を簡素化する強力で柔軟なフックです。副作用を実行するタイミングを制御し、必要に応じてクリーンアップすることで、コンポーネントを最適化し、不必要な再レンダリングやメモリ リークを回避できます。上記の例を試して、副作用管理の技術をマスターしてください!