useCustomCompareEffect

修改後的 useEffect，它接受一個比較函數，用於比較依賴項而不是引用相等性

useCustomCompareEffect 是 useEffect 的變體，允許你提供自訂比較函式來決定何時重新執行 effect。當內建的淺比較不足以滿足需求時（例如比較複雜物件或使用特定的相等性邏輯），這個 hook 非常有用。

使用場景

當依賴是複雜物件但只需在特定屬性變更時重新執行 effect
使用自訂相等性檢查來避免不必要的 effect 執行
實作基於商業邏輯的依賴比較（例如僅比較 ID 而非整個物件）

注意事項

比較函式：比較函式接收前一個和當前依賴陣列，回傳 true 表示相等（跳過 effect），false 表示不等（執行 effect）。
效能：確保比較函式本身是高效的，因為它在每次渲染時都會被呼叫。
相關 hooks：另請參閱 useDeepCompareEffect 用於自動深度比較，如果你只是需要深度相等性檢查的話。

Usage

Live Editor


function Demo() {
  const [person, setPerson] = useState({ name: "bob", id: 1 });
  const [count, setCount] = useState(0);
  useCustomCompareEffect(
    () => {
      setCount(c => c + 1);
    },
    [person],
    (prevDeps, nextDeps) => prevDeps[0].id === nextDeps[0].id,
  );

  return (
    <div>
      <button
        onClick={() => {
          setPerson({ name: "joey", id: 1 });
        }}
      >
        更改人名
      </button>
      <button
        onClick={() => {
          setPerson({ name: "bob", id: 2 });
        }}
      >
        更改人員ID
      </button>
      <p>useCustomCompareEffect 深度比較：{count}</p>
    </div>
  );
};

Result

API

useCustomCompareEffect

Returns

void

Arguments

參數名	描述	類型	預設值
effect	副作用函数	React.EffectCallback (必填)	-
deps	依赖列表	TDeps (必填)	-
depsEqual	依赖比较函数	DepsEqualFnType<TDeps> (必填)	-

DepsEqualFnType

export type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;