ReactのuseEffectで非同期処理をキャンセルする方法を初心者向けに解説

1. 非同期処理とキャンセルの必要性

1. 非同期処理とキャンセルの必要性

非同期処理とは、時間がかかる処理を待たずに進める仕組みです。例えば、サーバーからデータを取得するfetch関数などが代表例です。しかし、ユーザーが画面を移動したあともその処理が続いてしまうと、不要なエラーやメモリの無駄遣いが発生します。

そのため、ReactではuseEffectのクリーンアップ関数を使って、処理を途中でキャンセルできるようにします。

2. AbortControllerを使ったキャンセル

2. AbortControllerを使ったキャンセル

AbortControllerというブラウザ標準の機能を使うと、fetchの通信を途中で止められます。ReactのuseEffectと組み合わせると、安全にキャンセル処理を書けます。

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

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

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

    fetch("https://jsonplaceholder.typicode.com/posts/1", { signal })
      .then((res) => res.json())
      .then((result) => setData(result))
      .catch((error) => {
        if (error.name === "AbortError") {
          console.log("通信をキャンセルしました");
        } else {
          console.error(error);
        }
      });

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

  return (
    <div>
      <h1>データ表示</h1>
      {data ? <p>{data.title}</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default App;

3. フラグを使ったシンプルなキャンセル方法

3. フラグを使ったシンプルなキャンセル方法

AbortControllerを使わなくても、フラグを使って「この処理はもう不要」と判断する方法もあります。これは古くから使われているシンプルなやり方です。

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

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

  useEffect(() => {
    let isActive = true;

    fetch("https://jsonplaceholder.typicode.com/posts/2")
      .then((res) => res.json())
      .then((result) => {
        if (isActive) {
          setData(result);
        }
      });

    return () => {
      isActive = false;
    };
  }, []);

  return (
    <div>
      <h1>記事データ</h1>
      {data ? <p>{data.title}</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default App;

4. 実際の開発での利用場面

4. 実際の開発での利用場面

非同期処理のキャンセルは次のような場面で役立ちます。

• 検索フォームで入力が変わるたびにデータを取得する場合
• ページを移動するときに不要な通信を止めたい場合
• 大量のデータを扱うアプリで無駄な処理を避けたい場合

これらを正しく扱うと、アプリは無駄な負担が減り、ユーザー体験が良くなります。

5. 初心者が注意すべきポイント

5. 初心者が注意すべきポイント

キャンセル処理を忘れると、Reactで「アンマウント後に状態を更新しようとしました」という警告が出ることがあります。これは、画面が閉じたあとにもsetStateが呼ばれているからです。

このエラーを防ぐには、必ずクリーンアップ処理を使うこと、そして非同期処理を安全に止める習慣をつけることが大切です。

まとめ

まとめ

React開発において、useEffect内での非同期処理の制御は、アプリケーションの品質を左右する非常に重要な要素です。今回の記事では、データの取得中にコンポーネントが画面から消えてしまった（アンマウントされた）際に、どのようにしてその処理を中断させるかという「キャンセル処理」に焦点を当てて解説してきました。

フロントエンド開発、特にシングルページアプリケーション（SPA）では、ユーザーは頻繁にページやタブを切り替えます。そのたびにサーバーへのリクエストが走り、もしキャンセル処理が行われていないと、もはや存在しないコンポーネントに対して「データを画面に反映させて！」という命令が飛び続けてしまいます。これが、よく見かける「メモリリーク」や「不要なエラーログ」の原因となります。

非同期処理キャンセルの2大手法の比較

本記事で紹介した2つの手法は、どちらも現場で頻繁に使われるものです。それぞれの特徴を整理してみましょう。

実践的な実装例：カスタムフックへの応用

実際のプロジェクトでは、これら一連のキャンセル処理を毎回書くのは大変です。そのため、以下のようにカスタムフックとして共通化することが推奨されます。ここでは、より実戦に近いTypeScript（React TSX）での記述例を見てみましょう。

import { useState, useEffect } from "react";

// カスタムフック：データを安全に取得する
function useFetchData(url: string) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

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

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal });
        if (!response.ok) {
          throw new Error("ネットワーク応答が正常ではありません");
        }
        const json = await response.json();
        setData(json);
        setError(null);
      } catch (err: any) {
        if (err.name === "AbortError") {
          console.log("フェッチがキャンセルされました");
        } else {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // クリーンアップ関数で通信を中断
    return () => {
      controller.abort();
    };
  }, [url]);

  return { data, loading, error };
}

export default useFetchData;

パフォーマンスとユーザー体験の向上に向けて

Reactのフック（Hooks）を使いこなすということは、単に動くコードを書くだけでなく、アプリケーションが「背負っている負荷」をいかに軽くするかを考えることでもあります。 特に、検索エンジンのSEO対策が必要な公開サイトや、モバイル端末で利用されるWebアプリでは、無駄なデータ転送量を削ることが読み込み速度の向上に直結します。useEffectのクリーンアップは、そのための第一歩です。

また、最新のReact開発では「React Query」や「SWR」といった、強力なデータ取得ライブラリが使われることも増えています。これらのライブラリは、内部で今回解説したようなキャンセル処理を自動的に行ってくれます。しかし、その根本的な仕組みを知っているのと知らないのとでは、トラブルが起きた際の原因特定能力に大きな差が出ます。

基本をしっかりと押さえた上で、より高度なライブラリやフレームワーク（Next.jsなど）へとステップアップしていきましょう。コードの一行一行がユーザーのストレスを減らすことに繋がっていると意識すると、プログラミングがもっと楽しくなるはずです。