useOnceLayoutEffect

A Hook that avoids React18 useLayoutEffect run twice.

Usage

import { useOnceLayoutEffect } from "@reactuses/core";
import { useLayoutEffect, useState } from "react";

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

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

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

  return (
    <div>
      <div>onceEffect: {onceLayoutEffect}</div>
      <br />
      <div>effect: {updateEffect}</div>
    </div>
  );
};

Example

onceEffect: 0

effect: 0

Type Declarations

declare const _default: typeof useEffect | typeof useLayoutEffect
export default _default