useIsomorphicLayoutEffect

useLayoutEffect during actual client rendering, useEffect during a server render pass — a drop-in replacement that silences React's SSR warning.

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.

import { useIsomorphicLayoutEffect } from '@42/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:

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.