什麼是 Custom Hooks？
Custom Hooks 就是你自己寫的、可重複使用的功能模組，把常用的邏輯打包起來，讓不同的元件都能共享。
Custom Hooks 概念
- 所有 Hook 都必須以 use 開頭，例如 useFetch、useCounter，這樣才能正確追蹤它的行為。
- 把多個元件裡重複出現的 state 與 effect 抽出來，寫成一個函式，減少複製貼上。
- Custom Hook 本質上就是一個普通函式，它可以回傳任何東西，state、函式、或兩者的組合。
Custom Hooks語法
useCounter：Hook 的名稱。initialValue：參數，讓外部傳入初始值。useState(initialValue)：在 Hook 內部使用內建 Hook 管理狀態。increment：內部定義的輔助函式，封裝了更新邏輯。return { count, increment }：回傳值，把外部需要的 state 和函式交出去。
import { useState } from "react";
// 自訂 Hook：管理計數邏輯
function useCounter(initial) {
const [count, setCount] = useState(initial); // 建立 state
const increment = () => setCount(c => c + 1); // 定義遞增函式
return { count, increment }; // 回傳給外部使用
}
// Component 使用 Custom Hook
export default function App() {
const { count, increment } = useCounter(0); // 呼叫自訂 Hook，初始值為 0
return <button onClick={increment}>點了 {count} 次</button>;
}
