---
title: useLayoutEffect
description: An SSR-safe useLayoutEffect that becomes a no-op on the server instead of warning.
icon: layers
author:
  name: Radix UI
  url: https://github.com/radix-ui/primitives
---

### Installation

```package-install
npx 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

```tsx showLineNumbers
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`](https://react.dev/reference/react/useLayoutEffect). On the server it is replaced with a function that does nothing.

## Credits

Adapted from [Radix UI's `useLayoutEffect`](https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/use-layout-effect.tsx).