客製化 Hooks

10. 客製化 Hooks

通常會在src底下建立一個hooks資料夾，來放置自己寫的 hooks

📌 範例程式碼

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
}

📌 使用方式

// page.jsx

import { useFetch } from "@/hooks/useFetch"; //匯入hooks

function page() {
  const data = useFetch("/api/products");

  return <></>;
}

📌 用途

把「重複邏輯」抽出來

📌 命名規則

👉 一定要用 useXXX