useLayoutEffect

An SSR-safe useLayoutEffect that becomes a no-op on the server instead of warning.

Installation

npx shadcn@latest add @redpanda/use-layout-effect

pnpm dlx shadcn@latest add @redpanda/use-layout-effect

yarn dlx shadcn@latest add @redpanda/use-layout-effect

bunx shadcn@latest add @redpanda/use-layout-effect

nubx shadcn@latest add @redpanda/use-layout-effect

aube dlx shadcn@latest add @redpanda/use-layout-effect

React logs a warning when useLayoutEffect runs during server rendering, since layout effects can’t run on the server. This drop-in replacement uses the real React.useLayoutEffect in the browser and a no-op on the server, so shared components render cleanly in both environments. It’s a low-level utility used internally by other registry hooks.

Usage

import { useLayoutEffect } from "@/hooks/use-layout-effect";

function Measured() {
  useLayoutEffect(() => {
    // read/write layout synchronously before paint — no SSR warning
  }, []);

  return <div />;
}

API

useLayoutEffect(effect, deps?)

Identical signature to React’s useLayoutEffect. On the server it is replaced with a function that does nothing.

Credits

Adapted from Radix UI’s useLayoutEffect.