Rehooks

useIsomorphicLayoutEffect

Conditionally invokes useLayoutEffect on the server and useEffect on the client.

useIsomorphicLayoutEffect

Installation

npx rehooks-cli@latest add useIsomorphicLayoutEffect

Usage

Component.tsx
import { useIsomorphicLayoutEffect } from "~/hooks/useIsomorphicLayoutEffect";
 
function Component() {
  useIsomorphicLayoutEffect(() => {
    console.log("useIsomorphicLayoutEffect");
  }, []);
 
  return <div>Component</div>;
}

API

useIsomorphicLayoutEffect

useIsomorphicLayoutEffect.ts
const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

Parameters

NameTypeDescription
callbackEffectCallbackThe function to execute on each render.
deps?any[]An array of values that indicate when the effect should update. If none of the values change, the effect will not run.

On this page