# useIsomorphicLayoutEffect (/docs/hooks/use-isomorphic-layout-effect)



`useLayoutEffect` warns when it runs during an actual server render — a harmless no-op there, since effects never run during SSR at all — because Client Components in frameworks like Next.js's App Router still execute once on the server to produce the initial HTML. `useIsomorphicLayoutEffect` swaps to `useEffect` for that one pass to silence the warning with no behavior change; on the client it's `useLayoutEffect`, preserving its "flushes before the browser paints" guarantee.

```tsx
import { useIsomorphicLayoutEffect } from '@42-central/ui-react';

useIsomorphicLayoutEffect(() => {
  // measure the DOM, sync a ref, etc. — anything that must run before paint
}, [dependency]);
```

It's a direct drop-in for `useLayoutEffect`, not a hook with its own options:

```ts
const useIsomorphicLayoutEffect: typeof useLayoutEffect
```

Reach for this whenever a component needs `useLayoutEffect`'s pre-paint timing but is also rendered on the server (any Client Component in an App Router page). Plain client-only code (an app that never runs on the server) has no reason to use anything but `useLayoutEffect` directly.