useOnceLayoutEffect

避免 React18 useLayoutEffect 運行兩次

Usage

即時編輯器

function Demo() {
  const [updateEffect, setLayoutEffect] = useState(0);
  const [onceLayoutEffect, setOnceLayoutEffect] = useState(0);

  useOnceLayoutEffect(() => {
    setOnceLayoutEffect(onceEffect => onceEffect + 1);
  }, []);

  useLayoutEffect(() => {
    setLayoutEffect(effect => effect + 1);
  }, []);

  return (
    <div>
      <div>單次effect：{onceLayoutEffect}</div>
      <br />
      <div>effect：{updateEffect}</div>
    </div>
  );
};

結果

單次effect：1

effect：1