React の Custom Hooks についてや、Tips集📝

ピン留めされたアイテム

React のCustom Hooks内で非同期処理を行いたい場合

import { useEffect, useState } from "react";
import ItemRes from "$shared/types/res/common/items/ItemRes";
import ItemApi from "$cms/api/ItemApi";

interface UseItemsProps {
  eventKey: string;
}

export const useItems = ({ eventKey }: UseWebinarLinksProps) => {
  const [items, setItems] = useState<ItemRes[]>([]);

  useEffect(() => {
    // 非同期関数を定義し、その中で await を使う
    const fetchItems = async () => {
      try {
        const itemList: ItemRes[] = await ItemApi.findAll(eventKey);
        setItems(itemList);
      } catch (error) {
        console.error(error);
        // エラー処理など
      }
    };

    // 定義した非同期関数を呼び出す
    itemList();
  }, [eventKey]);

  return { items };
};

上記のようにすることで、

コンポーネント(フック)の初回描画や依存関係(eventKey など)が変わったタイミングで useEffect が呼ばれる
useEffect 内部で定義した非同期関数を呼び出して API コールを行う
非同期処理の結果を setItems で状態に保存する

という流れになります。
Hooks ではトップレベルのロジックは同期的である必要があるため、必ず useEffect やその他のコールバック関数内に非同期処理を入れてください。

まさぴょん🐱

React の Custom Hooks について

React のカスタムフック (Custom Hooks) は、React コンポーネント間でロジックを再利用するために開発者が作成するカスタム関数です。
これらは、標準のフック（useState や useEffect など）を組み合わせて、特定の機能を持つ新しいフックを作成することができます。
カスタムフックの名前は通常 use で始まります。
これにより、コンポーネントからロジックを抽出し、複数のコンポーネントにわたって共有することが可能となります。
カスタムフックを利用することで、コードの重複を減らし、メンテナンスや拡張が容易になります

まさぴょん🐱

React Hooks のルール & エラー対応

ルール① フックはトップレベルでしか呼び出せない
ルール② カスタムフックを作る時のルール
ルール③ フックを使う時はループ処理に気をつける

まさぴょん🐱

React のCustom Hooks内で非同期処理を行いたい場合

React の Custom Hooks について

React Hooks のルール & エラー対応

React Hoos の使い所 & utilsとの使い分け方