React カスタムフックのベストプラクティス: 使用例付き

目次を読むには、元の投稿 https://devaradise.com/react-custom-hooks-best-practices/ をチェックしてください

React 開発者であれば、コンポーネント間でロジックを共有する必要がある状況に遭遇したことがあるでしょう。この投稿では、カスタム フックとは何か、カスタム フックをいつ使用するか、カスタム フックを作成する際のベスト プラクティス、および React アプリケーションをよりクリーンで保守しやすくするための一般的な使用例について説明します。

React に関する関連投稿

1. 2024 年に React プロジェクトを開始してセットアップする方法
2. フックを使用した関数コンポーネントの反応
3. React 条件付きレンダリング (If Else) のベスト プラクティス

React のカスタムフックとは何ですか?

カスタム フックは、React コンポーネント間で共有できるステートフル ロジックを備えた再利用可能な関数です。これらは接頭辞の use から始まり、その内部で他のフックを呼び出すことができるため、複雑な状態と効果のロジックを単純で再利用可能な関数に抽象化することができます。

React カスタム フックは、コードを複製せずにアプリケーションの異なる部分間でロジックを共有する必要がある状況に最適です。これにより、コンポーネントがよりクリーンに保たれるだけでなく、よりモジュール化されたコードベースが促進されます。

カスタムフックは、通常の JavaScript の再利用可能な関数とは異なることに注意してください。カスタム フックはステートフルです。つまり、useState フックまたはその他の組み込みフックで反応状態を使用する必要があります。

React でカスタムフックを使用する場合

カスタム フックは、コンポーネント間でステートフル ロジックを再利用する必要がある場合、特にデータのフェッチ、フォーム処理、認証などの複雑なタスクに最適です。これらにより、コンポーネント コードが簡素化され、可読性が向上し、テストとメンテナンスが容易になります。

カスタム フックのもう 1 つの主要な使用例は、同じコードを複数の場所に記述している場合です。同じロジックをコピーして貼り付ける代わりに、それをカスタム フックに抽出し、必要なときに再利用できます。これにより、DRY (Don't Reply Yourself) 原則が促進され、コードベースがより効率的になり、エラーが発生しにくくなります。

カスタムフックを作成するためのベストプラクティス

カスタム フックを作成する場合、効果的かつ保守可能であることを保証するために留意すべきベスト プラクティスがいくつかあります。以下に重要なガイドラインをいくつか示します:

1. まずは使ってみよう

カスタムフックの名前は常に use で始まります。これは、他の React 開発者がこれらの関数をフックとして識別し、フックのルールが正しく適用されるようにするのに役立つ規則です。

2. フックをきれいに保つ

フックが純粋な関数であることを確認してください。フック内で直接副作用が発生するのを避けてください。代わりに、useEffect または同様のフックを使用して管理します。

副作用とは、レンダリング後にコンポーネントで発生する操作や動作であり、現在のコンポーネントのレンダリング サイクルに直接影響を与えません。

3. 不必要なレンダリングを避ける

特に高コストの計算や複雑な状態の更新を扱う場合は、useMemo や useCallback などのメモ化手法を使用して、フックによる不必要な再レンダリングの発生を防ぎます。

useState、useEffect、useReducer、useCallback などの組み込みフックを利用して、カスタム フック内の状態と副作用を管理します。

4. 一貫した値の型を返す

状態、関数、または公開したい値を含むフックから、一貫した値の型を持つ配列またはオブジェクトを返します。これにより、フックが提供するものとその使用方法が明確になります。

5. テストを作成し、カスタム フックを文書化する

カスタムフックが十分にテストされていることを確認してください。 React Testing Library や Jest などのツールを使用して、フックの動作を検証するテストを作成します。

カスタムフックに関する明確なドキュメントを提供してください。他の人 (そしてあなた自身) が使いやすく、保守しやすいように、それらの機能、パラメーター、戻り値を説明します。

6. シンプルに保つ

フックを複雑にしすぎないようにしてください。フックが複雑になり始めた場合は、より小さく、より焦点を絞ったフックに分割することを検討してください。

フックの責任が 1 つだけであることを確認してください。

7. エラーを適切に処理する

フック内でエラーを適切に処理します。これにより、これらのフックを使用するコンポーネントは、中断することなく予期しないシナリオを処理できるようになります。

カスタムフックの使用例

React プロジェクトで発生する可能性のあるカスタム フックの一般的な使用例をいくつか示します。

1. データの取得

API エンドポイントからデータを取得するためのカスタム フックは、データを取得して表示する必要があるさまざまなコンポーネント間で再利用できます。

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        }

        fetchData();
    }, [url]);

    return { data, loading, error };
}

const Component = () => {
    const { data, loading, error } = useFetch('https://example.com/api/path');

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>Data:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data)}