Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProuseLayoutEffect on the client and useEffect on the server, so layout measurements never log the server-rendering warning.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when an effect must run before paint on the client (measuring, scroll restore, avoiding flicker) in a component that is also rendered on the server.
Do not use it for effects that do not touch layout; plain useEffect is cheaper and does not block paint.
import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect"useIsomorphicLayoutEffect(() => {
setHeight(ref.current?.offsetHeight ?? 0)
}, [])useIsomorphicLayoutEffect: typeof React.useLayoutEffect
It is React.useLayoutEffect when window exists and React.useEffect otherwise, with the same signature: (effect, deps?). The choice is made once at import time.
A hook has no markup and no accessibility surface of its own.
The hook ships with renderHook tests (use-isomorphic-layout-effect.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.