React useEffectのクリーンアップ関数は必須？サブスクリプションと非同期タスクを安全に処理する方法を徹底比較

2024-05-20

ReactにおけるuseEffectのクリーンアップ関数でサブスクリプションと非同期タスクをキャンセルする方法

ReactのuseEffectフックは、コンポーネントのマウント、アンマウント、およびプロパティの更新に応じて副作用を実行するために使用されます。副作用には、データフェッチ、イベントリスナーの登録、タイマーの設定などが含まれます。

しかし、useEffect内で作成されたサブスクリプションや非同期タスクは、コンポーネントがアンマウントされた後も実行され続ける可能性があります。これは、メモリリークや予期しない動作につながる可能性があります。

このような問題を回避するために、useEffectのクリーンアップ関数を使用する必要があります。クリーンアップ関数は、コンポーネントがアンマウントされる前に実行される関数です。この関数内で、サブスクリプションのキャンセルや非同期タスクの終了処理を行うことができます。

サブスクリプションのキャンセル

イベントリスナーなどのサブスクリプションをキャンセルするには、それぞれに対応するremoveEventListenerメソッドを使用します。

useEffect(() => {
  const subscription = eventEmitter.addEventListener('myEvent', myEventHandler);

  return () => subscription.removeEventListener('myEvent', myEventHandler);
}, []);

非同期タスクをキャンセルするには、それぞれに対応するキャンセルメソッドを使用します。

AbortController: fetch APIなどの非同期タスクに使用できます。

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://my-api.com', { signal })
    .then(response => response.json())
    .then(data => setData(data));

  return () => controller.abort();
}, []);

clearInterval: タイマーに使用できます。

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Tick!');
  }, 1000);

  return () => clearInterval(intervalId);
}, []);

注意事項

クリーンアップ関数は、必ずuseEffectフック内で返す必要があります。
クリーンアップ関数内で複数の処理を行う場合は、アロー関数ではなく、通常の名無し関数を使用する必要があります。
クリーンアップ関数内で同期処理を行うと、パフォーマンスが低下する可能性があります。

useEffectのクリーンアップ関数を使用することで、サブスクリプションと非同期タスクを適切にキャンセルし、メモリリークや予期しない動作を防ぐことができます。

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

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

  useEffect(() => {
    const handleClick = () => setCount(count + 1);
    document.addEventListener('click', handleClick);

    return () => document.removeEventListener('click', handleClick);
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('カウント:', count);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>クリック</button>
    </div>
  );
}

説明

このコードでは、以下の処理が行われます。

useStateフックを使用して、countというステート変数を宣言します。
useEffectフックを2回使用します。
- 最初のuseEffectフックは、コンポーネントのマウント時に実行されます。このフック内で、addEventListenerメソッドを使用して、clickイベントリスナーをドキュメントに追加します。このイベントリスナーは、クリックされたときにsetCount関数を呼び出し、countステート変数を1増やします。
- クリーンアップ関数では、removeEventListenerメソッドを使用して、clickイベントリスナーをドキュメントから削除します。これにより、コンポーネントがアンマウントされた後もイベントリスナーが実行され続けるのを防ぎます。
- 2番目のuseEffectフックは、countステート変数の値が変更されるたびに実行されます。このフック内で、setIntervalメソッドを使用して、1秒ごとにコンソールにcountステート変数の値をログ出力するタイマーを設定します。

ReactにおけるuseEffectのクリーンアップ関数以外の代替方法

useRefフックを使用して、参照変数を保持することができます。この参照変数を使用して、サブスクリプションや非同期タスクを管理することができます。

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const subscriptionRef = useRef(null);
  const intervalIdRef = useRef(null);

  useEffect(() => {
    if (subscriptionRef.current) {
      subscriptionRef.current.unsubscribe();
    }

    const subscription = eventEmitter.subscribe('myEvent', myEventHandler);
    subscriptionRef.current = subscription;

    return () => subscription.unsubscribe();
  }, []);

  useEffect(() => {
    if (intervalIdRef.current) {
      clearInterval(intervalIdRef.current);
    }

    const intervalId = setInterval(() => {
      console.log('カウント:', count);
    }, 1000);

    intervalIdRef.current = intervalId;

    return () => clearInterval(intervalId);
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>クリック</button>
    </div>
  );
}

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

const MyContext = React.createContext();

function MyComponent() {
  const [count, setCount] = useState(0);
  const { subscriptions, setSubscriptions } = useContext(MyContext);

  useEffect(() => {
    const subscription = eventEmitter.subscribe('myEvent', myEventHandler);
    setSubscriptions(prevSubscriptions => [...prevSubscriptions, subscription]);

    return () => subscription.unsubscribe();
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('カウント:', count);
    }, 1000);

    setSubscriptions(prevSubscriptions => [...prevSubscriptions, intervalId]);

    return () => clearInterval(intervalId);
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>クリック</button>
    </div>
  );
}

function App() {
  const [subscriptions, setSubscriptions] = useState([]);

  return (
    <MyContext.Provider value={{ subscriptions, setSubscriptions }}>
      <MyComponent />
    </MyContext.Provider>
  );
}