ReactのuseEffectでcomponentWillUnmountのクリーンアップ処理を実装する方法を詳しく解説

ReactでのuseEffectフックは、コンポーネントのライフサイクルを簡単に管理するための強力なツールです。その中でも、クリーンアップ処理は、メモリリークや不要なリソースの消費を防ぐために重要な役割を果たします。従来のclassコンポーネントではcomponentWillUnmountメソッドを使用して行われていたこれらの処理が、useEffectを用いることでシンプルかつ直感的に実現できます。本記事では、useEffectでのクリーンアップ処理の基本から応用までを、具体的なコード例を交えながら詳しく解説します。

useEffectの基本構文と役割

ReactのuseEffectは、関数コンポーネント内で副作用（サイドエフェクト）を扱うためのフックです。副作用とは、データの取得、サブスクリプション、DOMの更新など、レンダリング以外の動作を指します。useEffectの基本的な構文は以下の通りです。

基本構文

useEffect(() => {
  // 副作用の処理
  return () => {
    // クリーンアップ処理
  };
}, [依存配列]);

役割と機能

初期化処理
useEffectは、コンポーネントのマウント時に特定の処理を実行するのに便利です。例えば、APIデータの取得などが挙げられます。
更新時の処理
依存配列に指定した値が変化したときに再実行されます。これにより、特定の状態やプロパティに基づいて処理を制御できます。
クリーンアップ処理
コンポーネントがアンマウントされる際や依存値が変更される際に、リソースの解放やイベントの解除を行います。これについては、後ほど詳細に説明します。

依存配列の挙動

空配列 ([])
初回のマウント時にのみ実行される。
特定の依存値
指定した依存値が変更されたときに再実行される。
依存配列なし
毎回のレンダリング後に実行される。

useEffectの柔軟な構文とその役割を理解することが、効率的なReactコンポーネントの設計に不可欠です。

クリーンアップ処理の必要性

Reactアプリケーションを効率的かつ安定して動作させるためには、クリーンアップ処理が重要です。クリーンアップ処理は、コンポーネントが不要になった際にリソースを適切に解放することで、パフォーマンスの低下やバグの発生を防ぎます。

クリーンアップが必要な場面

イベントリスナーの解除
DOMに登録したイベントリスナーを解除しないと、メモリリークが発生する可能性があります。
タイマーのクリア
setTimeoutやsetIntervalなどで設定したタイマーを適切にクリアしないと、意図しない処理が続行されることがあります。
サブスクリプションの解除
WebSocketやデータベースリスナーなどのサブスクリプションは、使用が終わったら明示的に解除する必要があります。
外部リソースの解放
ファイル操作やカメラ、マイクなどの外部リソースを利用する場合、適切に解放しないとアプリ全体のリソースに悪影響を及ぼす可能性があります。

クリーンアップを行わない場合の問題点

メモリリーク
不要なリソースが解放されず、メモリ使用量が増加します。これにより、アプリケーションの動作が重くなることがあります。
予期しない動作
古いイベントリスナーやタイマーが動作し続けると、意図しない処理が実行される可能性があります。
デバッグの難しさ
クリーンアップ処理を怠ると、問題の原因が特定しづらくなり、開発効率が低下します。

Reactにおけるクリーンアップの役割

Reactでは、useEffectの返り値として関数を返すことで、クリーンアップ処理を実装します。この仕組みにより、コンポーネントのライフサイクルに応じて適切なタイミングでリソースを解放することができます。

クリーンアップ処理の重要性を理解し、適切に実装することで、Reactアプリケーションのパフォーマンスと安定性を向上させることができます。

useEffect内でのクリーンアップ処理の実装方法

useEffectを使用することで、Reactコンポーネント内で簡単にクリーンアップ処理を実装できます。クリーンアップ処理は、useEffect内で返り値として関数を返す形で記述します。この返り値の関数は、コンポーネントのアンマウント時や依存値が変化したタイミングで実行されます。

基本的な実装例

以下は、タイマーを設定し、クリーンアップ時に解除する例です。

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

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

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

    // クリーンアップ処理
    return () => {
      clearInterval(timer); // タイマーを解除
      console.log("Timer cleared!");
    };
  }, []); // 空の依存配列なので、マウント時にのみ実行

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

export default TimerComponent;

実装のポイント

useEffect内で副作用を定義
副作用となるコード（タイマー、イベントリスナー、サブスクリプションなど）をuseEffect内で実装します。
返り値としてクリーンアップ関数を返す
副作用が不要になった際に実行するクリーンアップ処理を返り値の関数内に記述します。
依存配列を活用
クリーンアップ処理の実行タイミングは依存配列によって制御できます。依存配列が空の場合、コンポーネントのアンマウント時にのみ実行されます。

イベントリスナーのクリーンアップ例

以下は、ウィンドウサイズ変更イベントを監視するリスナーを登録し、アンマウント時に解除する例です。

function WindowResizeListener() {
  useEffect(() => {
    const handleResize = () => {
      console.log("Window resized:", window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    // クリーンアップ処理
    return () => {
      window.removeEventListener("resize", handleResize);
      console.log("Event listener removed!");
    };
  }, []); // マウント時とアンマウント時のみ実行

  return <div>Resize the window and check the console.</div>;
}

注意点

不要なリソースを早めに解放する
クリーンアップを正しく実装しないと、メモリリークや予期しない動作の原因になります。
依存配列の設定に注意
依存値が誤って設定されると、クリーンアップが正しく動作しない可能性があります。

これらの実装例とポイントを参考に、適切なクリーンアップ処理を設計することで、安全で効率的なReactコンポーネントを構築できます。

componentWillUnmountとの違い

ReactのuseEffectは、従来のクラスコンポーネントで使用されていたcomponentWillUnmountと同様にクリーンアップ処理を行う機能を持っていますが、両者にはいくつかの重要な違いがあります。これらの違いを理解することで、より効果的にReactのフックを活用できます。

classコンポーネント vs. 関数コンポーネント

componentWillUnmount（クラスコンポーネント）
クラスコンポーネントのライフサイクルメソッドの一部として、コンポーネントがアンマウントされる直前に実行されます。

  class ExampleComponent extends React.Component {
    componentDidMount() {
      // リソースの初期化
    }

    componentWillUnmount() {
      // クリーンアップ処理
    }

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

useEffect（関数コンポーネント）
関数コンポーネントでは、useEffect内で返り値として関数を返すことで、クリーンアップ処理を行います。componentWillUnmountと異なり、依存配列を指定することで特定の条件下で実行される点が特徴です。

  import React, { useEffect } from "react";

  function ExampleComponent() {
    useEffect(() => {
      // リソースの初期化

      return () => {
        // クリーンアップ処理
      };
    }, []); // マウント時とアンマウント時のみ実行

    return <div>Function Component</div>;
  }

主要な違い

適用範囲の柔軟性

componentWillUnmountは、コンポーネントのアンマウント時のみ実行されます。
useEffectは、依存配列の設定次第で、アンマウント時だけでなく依存値の変更時にもクリーンアップ処理を実行できます。

   useEffect(() => {
     console.log("Effect executed");
     return () => {
       console.log("Cleanup executed");
     };
   }, [dependency]); // dependencyの変更時にも実行

実装のシンプルさ

useEffectは関数コンポーネントの中で完結するため、クラスコンポーネントを使用する場合に比べてコードがシンプルになります。

新しいReactアーキテクチャへの適合

Reactフックの採用により、関数コンポーネントだけで状態管理や副作用を扱えるようになり、クラスコンポーネントを使用する必要が減少しました。

どちらを使うべきか

新規プロジェクトやモダンなReactでは、useEffectを使用するのが推奨されます。
既存のクラスコンポーネントを扱う場合には、互換性を保つためにcomponentWillUnmountを使用します。

まとめ

componentWillUnmountはクラスコンポーネントに特化した機能ですが、useEffectはより柔軟かつ簡潔にクリーンアップ処理を実装できる方法です。Reactの関数コンポーネントを活用しながら、クリーンアップ処理を効率的に設計するためにuseEffectを積極的に利用しましょう。

クリーンアップ処理の実践例

ReactのuseEffectを用いたクリーンアップ処理は、さまざまな場面で実践的に活用できます。ここでは、代表的な例としてタイマーのクリア、イベントリスナーの解除、サブスクリプションの解除を取り上げ、それぞれの実装方法を紹介します。

タイマーのクリア

タイマーを設定し、それを適切に解除することで不要な処理を防ぎます。

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

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

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // クリーンアップ処理
    return () => {
      clearInterval(timerId);
      console.log("Timer cleared!");
    };
  }, []); // 一度だけタイマーを設定

  return <div>Timer Count: {count}</div>;
}

ポイント

タイマーIDを保持し、アンマウント時にclearIntervalで解除。
依存配列を空にして、マウント時のみタイマーを設定。

イベントリスナーの解除

イベントリスナーを登録し、アンマウント時に解除する例です。

function ResizeListenerExample() {
  useEffect(() => {
    const handleResize = () => {
      console.log("Window size:", window.innerWidth, window.innerHeight);
    };

    window.addEventListener("resize", handleResize);

    // クリーンアップ処理
    return () => {
      window.removeEventListener("resize", handleResize);
      console.log("Resize listener removed!");
    };
  }, []); // マウント時のみリスナーを登録

  return <div>Resize the window to see the effect in console.</div>;
}

ポイント

イベントリスナーは不要になったら必ず解除する。
アンマウント時に確実にremoveEventListenerを呼び出す。

サブスクリプションの解除

WebSocketや外部データベースのサブスクリプションは、適切に解除しないとメモリリークが発生する可能性があります。

function WebSocketExample() {
  useEffect(() => {
    const socket = new WebSocket("wss://example.com/socket");

    socket.onmessage = (event) => {
      console.log("Message received:", event.data);
    };

    // クリーンアップ処理
    return () => {
      socket.close();
      console.log("WebSocket closed!");
    };
  }, []); // 一度だけWebSocketを接続

  return <div>WebSocket connected. Check console for messages.</div>;
}

ポイント

WebSocketや外部APIは適切にクローズしてリソースを解放する。
リアルタイム通信を扱う際には特に重要。

複数のクリーンアップ処理

複数のリソースを同時に管理する場合も、useEffect内でまとめてクリーンアップできます。

function MultiCleanupExample() {
  useEffect(() => {
    const timerId = setInterval(() => {
      console.log("Timer running...");
    }, 1000);

    const handleResize = () => {
      console.log("Window resized");
    };

    window.addEventListener("resize", handleResize);

    // クリーンアップ処理
    return () => {
      clearInterval(timerId);
      window.removeEventListener("resize", handleResize);
      console.log("All resources cleaned up!");
    };
  }, []); // マウント時にリソースをセット

  return <div>Check console for logs and resize the window.</div>;
}

ポイント

すべてのリソースを一括して管理する。
返り値の関数内で順序よくリソースを解放。

まとめ

タイマー、イベントリスナー、サブスクリプションなどのクリーンアップ処理は、リソースリークを防ぐために必須です。
useEffectの返り値関数を活用し、明確で効率的なクリーンアップ処理を実装しましょう。
上記の例を参考に、さまざまなシナリオに応じたクリーンアップ処理を適切に設計してください。

よくあるトラブルとその対策

Reactでのクリーンアップ処理を実装する際には、いくつかのトラブルに遭遇することがあります。これらのトラブルの原因を理解し、適切な対策を講じることで、安定したアプリケーションを構築できます。

トラブル1: メモリリーク

原因:

タイマーやイベントリスナー、サブスクリプションを解除し忘れる。
非同期処理がコンポーネントのアンマウント後も実行される。

対策:

useEffectの返り値で明示的にクリーンアップ処理を記述する。
非同期処理にはキャンセル可能な仕組みを導入する。

例:

function AsyncExample() {
  useEffect(() => {
    let isCancelled = false;

    const fetchData = async () => {
      const response = await fetch("https://api.example.com/data");
      if (!isCancelled) {
        console.log("Data fetched:", await response.json());
      }
    };

    fetchData();

    return () => {
      isCancelled = true;
    };
  }, []);

  return <div>Check console for data.</div>;
}

トラブル2: 依存配列の誤設定

原因:

依存配列に必要な値を指定し忘れる。
不要な値を依存配列に追加して無限ループが発生する。

対策:

必要な依存値を正確に指定する。
eslint-plugin-react-hooksを使用して依存配列の設定ミスを防ぐ。

例:

function Counter({ step }) {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + step);
    }, 1000);

    return () => clearInterval(timer);
  }, [step]); // stepを依存配列に正しく指定

  return <div>Count: {count}</div>;
}

トラブル3: 不要なクリーンアップの実行

原因:

クリーンアップが必要ない処理に対して返り値を設定してしまう。
依存配列の変更によって不必要なクリーンアップが頻繁に発生する。

対策:

必要な場合にのみ返り値としてクリーンアップ関数を返す。
最小限の依存配列を設定する。

例:

function Example() {
  useEffect(() => {
    console.log("Effect executed");

    return () => {
      console.log("Cleanup executed unnecessarily");
    };
  }, []); // 不要なクリーンアップを防ぐ
}

トラブル4: クリーンアップの忘れによる意図しない動作

原因:

イベントリスナーやタイマーの解除を忘れる。
前回の状態が残ったまま、新しい処理が開始される。

対策:

常にreturn内で適切な解除処理を実装する。
開発中はconsole.logでクリーンアップの実行を確認する。

例:

function ResizeListener() {
  useEffect(() => {
    const handleResize = () => console.log("Resizing...");
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      console.log("Cleanup complete");
    };
  }, []);

  return <div>Resize the window and check the console.</div>;
}

トラブル5: 競合するクリーンアップ処理

原因:

複数のuseEffect内で同じリソースを管理している。
他の処理がクリーンアップのタイミングに影響を与える。

対策:

クリーンアップ処理をカスタムフックで一元化し、管理を簡素化する。

例:

function useEventListener(event, handler) {
  useEffect(() => {
    window.addEventListener(event, handler);

    return () => {
      window.removeEventListener(event, handler);
    };
  }, [event, handler]);
}

まとめ

メモリリークや意図しない動作を防ぐために、useEffect内でクリーンアップ処理を確実に実装しましょう。
依存配列や非同期処理の挙動に注意し、問題が起きない設計を心がけることが重要です。
トラブルを避けるには、適切なツールやカスタムフックを活用し、コードを簡潔に保つことが効果的です。

最適化されたクリーンアップの設計方法

Reactアプリケーションにおいて、クリーンアップ処理を効率的かつ最適化された方法で設計することは、コードの可読性やパフォーマンスに大きく影響します。ここでは、最適化されたクリーンアップ処理の設計のポイントを具体的に解説します。

ポイント1: カスタムフックの活用

クリーンアップ処理を含むコードが複数のコンポーネントで使われる場合、カスタムフックを作成して再利用性を高めます。

例: イベントリスナーを管理するカスタムフック

import { useEffect } from "react";

function useEventListener(eventType, listener) {
  useEffect(() => {
    window.addEventListener(eventType, listener);

    return () => {
      window.removeEventListener(eventType, listener);
    };
  }, [eventType, listener]);
}

// 使用例
function ResizeComponent() {
  useEventListener("resize", () => {
    console.log("Window resized!");
  });

  return <div>Resize the window and check the console.</div>;
}

利点:

コードの再利用性が向上。
クリーンアップロジックが一元化され、管理が容易になる。

ポイント2: 依存配列を正しく設計する

useEffectの依存配列は、クリーンアップ処理の実行タイミングを決定します。これを正しく設計することで、不要な再実行を防ぎ、パフォーマンスを向上させます。

正しい依存配列の設定例:

function TimerComponent({ step }) {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log(`Step: ${step}`);
    }, 1000);

    return () => clearInterval(interval);
  }, [step]); // stepが変化した場合のみ再実行
}

ベストプラクティス:

依存配列に必要な値を全て含める。
不必要な値を依存配列に追加しない。
eslint-plugin-react-hooksを利用して、依存配列の設定ミスを防ぐ。

ポイント3: 非同期処理の安全性を確保

非同期処理の結果が不要な状態で実行されないよう、キャンセル処理を設計します。

例: 非同期処理のキャンセル

function FetchDataComponent() {
  useEffect(() => {
    let isCancelled = false;

    async function fetchData() {
      const response = await fetch("https://api.example.com/data");
      if (!isCancelled) {
        console.log(await response.json());
      }
    }

    fetchData();

    return () => {
      isCancelled = true;
    };
  }, []);

  return <div>Fetching data...</div>;
}

注意:

非同期処理には、クリーンアップでキャンセルフラグを活用。
アンマウント後に不要な非同期処理が実行されるのを防ぐ。

ポイント4: 状態管理ライブラリの活用

複雑な状態管理やサブスクリプションの解除には、状態管理ライブラリ（Redux, Zustandなど）の導入を検討します。

例: Zustandを利用したサブスクリプション管理

import create from "zustand";

const useStore = create((set) => ({
  data: null,
  fetchData: async () => {
    const response = await fetch("https://api.example.com/data");
    set({ data: await response.json() });
  },
}));

function ZustandExample() {
  const fetchData = useStore((state) => state.fetchData);
  const data = useStore((state) => state.data);

  useEffect(() => {
    fetchData();
    return () => console.log("Component unmounted");
  }, [fetchData]);

  return <div>Data: {JSON.stringify(data)}</div>;
}

ポイント5: クリーンなコードを保つ

最適化されたクリーンアップ処理を設計するためには、コードのシンプルさと可読性を保つことが重要です。

ベストプラクティス:

必要以上に複雑なロジックをuseEffectに含めない。
クリーンアップロジックをわかりやすく記述する。
ドキュメントやコメントを活用し、クリーンアップの意図を明確にする。

まとめ

クリーンアップ処理をカスタムフックや状態管理ライブラリで最適化し、コードの再利用性を高めましょう。
依存配列や非同期処理を慎重に設計し、パフォーマンスと安全性を確保します。
必要に応じてツールやライブラリを活用し、管理を効率化しましょう。これらの最適化ポイントを実践することで、安定したReactアプリケーションを構築できます。

応用: クリーンアップ処理を含むカスタムフックの作成

Reactのカスタムフックを使用すると、クリーンアップ処理を含むコードを再利用可能な形でモジュール化できます。これにより、コードの可読性とメンテナンス性が向上し、複数のコンポーネントで簡単に活用できるようになります。

カスタムフックでのクリーンアップ処理の基本構造

カスタムフックは通常の関数として定義され、内部でuseEffectを使用してクリーンアップ処理を行います。以下は、基本的な構造です。

import { useEffect } from "react";

function useCustomCleanupEffect(effect, dependencies) {
  useEffect(() => {
    // エフェクト処理
    return effect; // クリーンアップ関数を返す
  }, dependencies);
}

ポイント:

クリーンアップ処理をカスタムフック内に閉じ込める。
effectやdependenciesを引数として渡し、汎用性を持たせる。

応用例1: イベントリスナーを管理するカスタムフック

ウィンドウのリサイズイベントを監視し、クリーンアップ時にリスナーを解除するカスタムフックを作成します。

function useWindowResize(handler) {
  useEffect(() => {
    window.addEventListener("resize", handler);

    return () => {
      window.removeEventListener("resize", handler);
    };
  }, [handler]); // handlerの変更時に再登録
}

使用例:

function ResizeLogger() {
  useWindowResize(() => {
    console.log("Window resized:", window.innerWidth, window.innerHeight);
  });

  return <div>Resize the window to see logs in the console.</div>;
}

利点:

イベントリスナーの登録と解除が一元化され、コードが簡潔に。

応用例2: WebSocket接続を管理するカスタムフック

WebSocket接続の初期化とクリーンアップをカスタムフックで管理します。

import { useState, useEffect } from "react";

function useWebSocket(url) {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    setSocket(ws);

    ws.onopen = () => console.log("WebSocket connected");
    ws.onclose = () => console.log("WebSocket disconnected");

    return () => {
      ws.close();
    };
  }, [url]); // URLが変更された場合に再接続

  return socket;
}

使用例:

function WebSocketExample() {
  const socket = useWebSocket("wss://example.com/socket");

  useEffect(() => {
    if (socket) {
      socket.onmessage = (event) => console.log("Message received:", event.data);
    }
  }, [socket]);

  return <div>WebSocket connected. Check the console for messages.</div>;
}

利点:

WebSocketの接続とクリーンアップを分離し、管理を簡素化。

応用例3: タイマーの管理を行うカスタムフック

タイマーのセットアップとクリアを管理するカスタムフックを作成します。

function useInterval(callback, delay) {
  useEffect(() => {
    const intervalId = setInterval(callback, delay);

    return () => {
      clearInterval(intervalId);
    };
  }, [callback, delay]); // callbackやdelayが変更された場合に再設定
}

使用例:

function TimerLogger() {
  useInterval(() => {
    console.log("Timer triggered");
  }, 1000);

  return <div>Check the console for timer logs every second.</div>;
}

利点:

タイマーの設定やクリアが自動化され、重複コードを回避。

応用例4: サブスクリプションを管理するカスタムフック

外部APIやデータベースのサブスクリプションをクリーンアップ付きで管理します。

function useSubscription(subscribe, unsubscribe) {
  useEffect(() => {
    const subscription = subscribe();

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

使用例:

function DataSubscription() {
  useSubscription(
    () => {
      console.log("Subscribed to data source");
      return { id: "subscription-id" }; // 仮のサブスクリプションオブジェクト
    },
    (subscription) => {
      console.log("Unsubscribed from data source:", subscription.id);
    }
  );

  return <div>Subscribed to data source. Check the console.</div>;
}

利点:

複雑なサブスクリプションロジックをカスタムフックにカプセル化。

まとめ

カスタムフックを利用することで、クリーンアップ処理を含むコードをモジュール化し、再利用性を向上できます。
イベントリスナー、WebSocket、タイマー、サブスクリプションなど、特定のユースケースに応じた汎用的なフックを作成することで、Reactアプリケーションの設計を効率化できます。
必要なクリーンアップ処理をカスタムフックに閉じ込めることで、コードの一貫性とメンテナンス性を高めましょう。

まとめ

本記事では、ReactのuseEffectを使ったクリーンアップ処理の基本から応用までを解説しました。クリーンアップ処理の必要性やcomponentWillUnmountとの違いを理解し、実践例を通じてタイマー、イベントリスナー、サブスクリプションの効率的な管理方法を学びました。また、カスタムフックを活用してクリーンアップ処理をモジュール化し、再利用性を向上させるテクニックも紹介しました。

適切にクリーンアップ処理を設計することで、Reactアプリケーションのパフォーマンスを向上させ、安定した動作を実現できます。useEffectを活用して、シンプルで安全なコードを構築しましょう。

ReactのuseEffectでcomponentWillUnmountのクリーンアップ処理を実装する方法を詳しく解説

useEffectの基本構文と役割

基本構文

役割と機能

依存配列の挙動

クリーンアップ処理の必要性

クリーンアップが必要な場面

クリーンアップを行わない場合の問題点

Reactにおけるクリーンアップの役割

useEffect内でのクリーンアップ処理の実装方法

基本的な実装例

実装のポイント

イベントリスナーのクリーンアップ例

注意点

componentWillUnmountとの違い

classコンポーネント vs. 関数コンポーネント

主要な違い

どちらを使うべきか

まとめ

クリーンアップ処理の実践例

タイマーのクリア

イベントリスナーの解除

サブスクリプションの解除

複数のクリーンアップ処理

まとめ

よくあるトラブルとその対策

トラブル1: メモリリーク

トラブル2: 依存配列の誤設定

トラブル3: 不要なクリーンアップの実行

トラブル4: クリーンアップの忘れによる意図しない動作

トラブル5: 競合するクリーンアップ処理

まとめ

最適化されたクリーンアップの設計方法

ポイント1: カスタムフックの活用

ポイント2: 依存配列を正しく設計する

ポイント3: 非同期処理の安全性を確保

ポイント4: 状態管理ライブラリの活用

ポイント5: クリーンなコードを保つ

まとめ

応用: クリーンアップ処理を含むカスタムフックの作成

カスタムフックでのクリーンアップ処理の基本構造

応用例1: イベントリスナーを管理するカスタムフック

応用例2: WebSocket接続を管理するカスタムフック

応用例3: タイマーの管理を行うカスタムフック

応用例4: サブスクリプションを管理するカスタムフック

まとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル