Overview

useIsomorphicLayoutEffect is part of the @usefy ecosystem — a collection of production-ready, TypeScript-first, SSR-safe React hooks. An SSR-safe useLayoutEffect that falls back to useEffect on the server.

Features

• No SSR warning — uses useEffect on the server
• Synchronous on client — measure/mutate the DOM before paint
• Drop-in — same signature as useLayoutEffect
• TypeScript-first — full type inference and exported types
• Tiny & tree-shakeable — zero dependencies, published as its own package

Installation

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

# yarn
yarn add @usefy/use-isomorphic-layout-effect

# pnpm
pnpm add @usefy/use-isomorphic-layout-effect

Requires React 18 or 19 (peerDependencies: "react": "^18.0.0 || ^19.0.0").

Quick Start

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

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

API

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

Testing

📊 View Detailed Coverage Report (GitHub Pages) — 4 tests, 100% statement coverage.

License

MIT © mirunamu

This package is part of the usefy monorepo.