本文介紹為什麼我們要建立並使用 Custom Hooks，以及講解如何撰寫創建自己的 Hooks，讓我們在開發 React 專案時更好地複用各種邏輯與程式碼。
什麼是 Custom Hook
- Custom Hooks 可以使用 React Hooks 與 State 等函式
- 使用時機：當不同元件裡有著一定程度的共通邏輯時，我們會想要複用邏輯，在各個元件中只去撰寫不同的部分
- 特性：每一次使用 Custom Hook 時，各別內部的 State 與 Effect 都是完全獨立的
示範建立一個 Custom Hook
Custom Hooks 其實不是 Functional Components，它是一個函式，只是在做法上有點類似
首先我通常習慣在 src 底下建立一個名為 hooks 的資料夾，專門用來存放自己建立的 Custom Hooks。而 Custom Hooks 的檔案名稱也是依照個人喜好即可，我自己喜歡用 useXxx.js 作為命名規則，舉例來說，新增 src/hooks/useCounter.js 檔案。
創建好檔案後，我們必須在將函式名稱命名為 useXxx，例如：useCounter。這種函式名稱的命名方式是必須遵守的規範，這是為了讓 React 能夠辨別這是一個 Custom Hook，讓你能夠在裡面使用 useEffect 等 Hooks。
import { useEffect, useState } from "react";
const useCounter = () => {
const [counter, setCounter] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCounter((prevCounter) => prevCounter + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return counter;
};
export default useCounter;
如同內建的 React Hooks，這個 Custom Hook 也會 return 東西，我們建立的 Custom Hook 可以回傳「任何」型別。在這個範例當中，我是回傳一個計算過後的 number。
最後記得導出這個 Custom Hook，這樣我們才能在其他元件中調用它。
使用自己建立的 Custom Hook
現在我們就到其他元件中使用 useCounter，以此取得回傳值（到這裡，我們就已經成功做到邏輯拆分囉）。
在使用 Custom Hooks 的時候，如果在「多個元件」中使用同一個 Custom Hook，每個元件都會產生一套自己的 Custom Hook，也就是裡面使用的 State 或 Effect 等資料都是「不會共用」的。
共用的是邏輯，不會共用狀態
const ForwardCounter = () => {
const counter = useCounter(); // 這個 counter 是 Custom Hook 回傳的
return <Card>{counter}</Card>;
};
export default ForwardCounter;
接下來，我們可以再針對不同的邏輯去做改變，像是透過「參數」來指定不同的邏輯。例如：透過 forwards 參數，給予 Custom Hook false 表示遞減，預設的 true 則為遞增。
const useCounter = (forwards = true) => {
const [counter, setCounter] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
// 根據參數的值判斷要執行的動作
if (forwards) {
setCounter((prevCounter) => prevCounter + 1);
} else {
setCounter((prevCounter) => prevCounter - 1);
}
}, 1000);
return () => clearInterval(interval);
}, [forwards]); // 記得把參數放入 Dependencies array
return counter;
};
使用上加上參數，例如：選擇傳入 false 表示要執行遞減。
const BackwardCounter = () => {
const counter = useCounter(false);
return <Card>{counter}</Card>;
};
使用 Custom Hooks 的注意事項
1. 小心傳遞參考類型
如果 Custom Hook 回傳的內容包含函式（或物件），在使用 useEffect 時「不要」將它們加入 dependencies array 來偵測變化。
為什麼？理論上應該加入沒錯，但實際上這會導致無限循環！因為每次生成的新函式或物件雖然看起來一樣，但實際上是不同的引用，這會導致 useEffect 不斷重跑。
解決方法：對可能變動的函式（或物件）使用 useCallback（或 useMemo），這樣就能確保它們是同一個引用。
import { useState, useEffect, useCallback } from "react";
const useCustomHook = () => {
const [value, setValue] = useState(0);
const updateValue = useCallback(() => {
setValue((prev) => prev + 1);
}, []);
return { value, updateValue };
};
const MyComponent = () => {
const { value, updateValue } = useCustomHook();
useEffect(() => {
updateValue(); // 加上 useCallback 避免導致無限循環
}, [updateValue]);
return <div>{value}</div>;
};
2. 避免在使用 Custom Hook 時傳入參數，將外部依賴改為函式參數
除了使用 useCallback 或 useMemo 之外，還有另一個解決方法，就是將 Custom Hook 所依賴的變數改為函式的參數。
這意味著在 Custom Hook 內部使用這些變數的地方，我們直接把它們作為函式參數來傳遞。這樣一來，我們就不需要在 Custom Hook 中傳遞這些變數，Custom Hook 也不需要新增 dependencies。
import { useEffect } from "react";
const useCustomHook = () => {
const logDependency = (dependency) => {
console.log(dependency);
};
return logDependency;
};
const MyComponent = ({ someProp }) => {
const logDependency = useCustomHook();
useEffect(() => {
// 傳遞 someProp 作為參數給 logDependency，而不是直接依賴 someProp
// 減少了不必要的重複渲染和潛在的錯誤
logDependency(someProp);
}, [someProp, logDependency]);
return <div>{someProp}</div>;
};
回顧
看完這篇文章，我們到底有什麼收穫呢？藉由本文可以理解到…
- Custom Hooks