『Day 31』認識 Custom Hook

前言

在前端開發的路上，隨著專案規模逐漸擴大，總是會遇到需要在不同元件中重複使用某些邏輯的情況。還記得以前遇到這種狀況時，我常常會直接複製貼上相關的程式碼，導致後續維護變得非常困難。後來接觸到了 React 的自訂 Hook 這個概念，才發現原來我們可以用更優雅的方式來處理這個問題。

今天就讓我分享一下自訂 Hook 的使用心得，看看它如何幫助我們寫出更好維護的程式碼。

認識自訂 Hook

自訂 Hook 是 React 提供給我們的一個強大工具，讓我們能夠把常用的邏輯包裝成可重複使用的函式。它的概念其實很簡單：就像我們會把重複的程式碼包成函式一樣，自訂 Hook 讓我們能把重複的 React 邏輯（像是 state 管理、side effect）包裝起來重複使用。

讓我們看個簡單的例子：

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

這個自訂 Hook 封裝了監聽網路狀態的邏輯，讓我們可以在任何需要的元件中重複使用這個功能。

重要的使用原則

在實務開發中，我發現遵循一些原則能幫助我們寫出更好的自訂 Hook：

1. 命名規則很重要

自訂 Hook 必須以 use 開頭：

// ✅ 好的命名
function useFormInput() { ... }

// ❌ 不好的命名
function formInput() { ... }

這不只是慣例，更是讓 React 能夠判斷這個函式是否為 Hook 的重要依據。

2. 保持單一職責

每個 Hook 應該專注於處理一個特定的功能：

// ✅ 好的做法：專注處理表單輸入
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = e => setValue(e.target.value);
  return { value, onChange };
}

// ❌ 不好的做法：試圖處理太多功能
function useFormWithValidationAndSubmit() {
  // ... 處理表單輸入
  // ... 處理驗證邏輯
  // ... 處理提交邏輯
}

3. 狀態的獨立性

每個使用自訂 Hook 的元件都會獲得獨立的狀態：

function ProfilePage() {
  // 這兩個輸入框會有各自獨立的狀態
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  return (
    <>
      <input {...nameInput} />
      <input {...emailInput} />
    </>
  );
}

什麼時候該使用自訂 Hook？

在實務開發中，我發現以下情況特別適合使用自訂 Hook：

當多個元件中出現類似的 useEffect 邏輯時
需要處理複雜的表單邏輯時
要整合第三方服務或 API 時

總結

自訂 Hook 讓我們能夠以更有組織的方式來重用 React 邏輯。透過適當的抽象和封裝，我們可以讓元件的程式碼更專注在畫面呈現上，而把共用的邏輯統一管理。記住，好的自訂 Hook 應該：

容易理解它的用途
解決特定的問題
保持程式碼的可維護性

最重要的是，不要為了重用而重用。讓自訂 Hook 自然地融入你的開發流程，這樣才能發揮它最大的價值。