useDeepCompareEffect

修改後的 useEffect ，對其依賴項使用深度比較而不是引用相等

Usage

即時編輯器

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>
  );
};

結果

effect計數：0

深度比較計數：0

API

useDeepCompareEffect

Returns

void

Arguments

參數名	描述	類型	預設值
effect	副作用函数	React.EffectCallback (必填)	-
deps	依赖列表	React.DependencyList (必填)	-