useDeepCompareEffect

修改后的 useEffect ，对其依赖项使用深度比较而不是引用相等

useDeepCompareEffect 是 useEffect 的直接替代品，对依赖数组执行深度结构比较而非浅引用检查。这防止了依赖项是包含相同值的新对象或数组引用时的不必要 effect 执行。它与 useEffect 具有相同的签名，并支持清理函数。

使用场景

当 effect 依赖于每次渲染都重新创建的对象或数组时（例如内联对象、API 响应数据）
避免由非记忆化的依赖引用导致的无限 effect 循环
当对每个依赖都使用 useMemo 或 useCallback 过于冗长时

注意事项

性能：深度比较的开销与依赖值的大小成正比。对于大型或深度嵌套的对象，考虑使用 useCustomCompareEffect 配合有针对性的比较器。
清理支持：与 useEffect 完全相同地支持基于返回值的清理函数。
当你需要超越深度相等的比较逻辑时，参见 useCustomCompareEffect。

Usage

Live Editor


function Demo() {
  const [count, setCount] = useState(0);
  const effectCountRef = useRef(0);
  const deepCompareCountRef = useRef(0);

  useEffect(() => {
    effectCountRef.current += 1;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [{}]);

  useDeepCompareEffect(() => {
    deepCompareCountRef.current += 1;
    return () => {
      // do something
    };
  }, [{}]);

  return (
    <div>
      <p>effect计数: {effectCountRef.current}</p>
      <p>深度比较计数: {deepCompareCountRef.current}</p>
      <p>
        <button type="button" onClick={() => setCount(c => c + 1)}>
          重新渲染
        </button>
      </p>
    </div>
  );
};

Result

API

useDeepCompareEffect

Returns

void

Arguments

参数名	描述	类型	默认值
effect	副作用函数	React.EffectCallback (必填)	-
deps	依赖列表	React.DependencyList (必填)	-