【React】複数のエラーをまとめてハンドリングするカスタムフックの作成

はじめに

Reactの非同期通信でのエラーを処理する中で、1つのページで複数のエラーが発生したときに個々でエラーを処理していくのは手間なので、エラーを一元管理し、効率的にハンドリングする方法を考えてみました。

複数のエラーが発生しても個々のエラーで表示を変える必要がない場合に使用します。

カスタムフックの作成

import { useEffect, useState } from "react";

export const useErrors = (...errors) => {
    const [error, setError] = useState(null);

    useEffect(() => {
        for (let i = 0; i < errors.length; i++) {
            if (errors[i]) {
                setError(errors[i]);
                break;
            }
        }
    }, errors);

    return error;
};

このカスタムフックは、複数のエラーオブジェクトを受け取り、エラーが変更されるたびに実行され、最初にエラーが検出されたらそれを error ステートにセットします。

その後、他のエラーを無視します。これにより、複数のエラーが発生した場合でも、最初に発生したエラーだけを取得できます。

使用方法

このカスタムフックを使用するには、以下のように複数のエラーを引数として渡します。

const error = useErrors(fetchError1, fetchError2);

このようにして、複数のエラーをまとめて一つの error 変数で管理することができます。最初に発生したエラーが error 変数にセットされ、それ以降のエラーは無視されます。これにより、コンポーネント内でエラーを効果的に管理し、適切に処理できるようになります。

最後に

もっと効率的な方法があるとは思うので、他にも思いついたら記事にしたいと思います。