Skip to content
usefy

useIsomorphicLayoutEffect

Lifecycle & refs

An SSR-safe useLayoutEffect that falls back to useEffect on the server

npmSourceFull READMEStorybook demo ↗

Install

$ npm install @usefy/use-isomorphic-layout-effect

Quick start

useIsomorphicLayoutEffect.tsx
import { useIsomorphicLayoutEffect } from "@usefy/use-isomorphic-layout-effect";

useIsomorphicLayoutEffect(() => {
  const rect = ref.current?.getBoundingClientRect();
  setSize(rect);
}, []);

API reference

useIsomorphicLayoutEffect — resolves to useLayoutEffect in the browser and useEffect on the server. Same signature as useLayoutEffect.

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →

More in lifecycle & refs

useEventCallbackhook

A React hook returning a stable callback that always sees the latest props and state

Lifecycle & refs
useInithook

A React hook for one-time initialization with async support, retry, timeout, and conditional execution

Lifecycle & refs
useIsClienthook

A React hook that returns true once the component has hydrated on the client (SSR-safe)

Lifecycle & refs