# use-isomorphic-layout-effect

> A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).

Latest version **1.2.1** (published 2025-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-isomorphic-layout-effect
pnpm add use-isomorphic-layout-effect
yarn add use-isomorphic-layout-effect
bun add use-isomorphic-layout-effect
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2025-05-16 |
| First published | 2020-06-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Maintainers | andarist |

## Links

- npm: https://www.npmjs.com/package/use-isomorphic-layout-effect
- Repository: https://github.com/Andarist/use-isomorphic-layout-effect
- Homepage: https://github.com/Andarist/use-isomorphic-layout-effect#readme
- Issues: https://github.com/Andarist/use-isomorphic-layout-effect/issues
- npm.io page: https://npm.io/package/use-isomorphic-layout-effect

## Recent versions

- 1.2.1 (latest) — 2025-05-16
- 1.2.0 — 2024-12-06
- 1.1.2 — 2022-03-30
- 1.1.1 — 2020-12-19
- 1.1.0 — 2020-10-26
- 1.0.0 — 2020-06-30

## README

# use-isomorphic-layout-effect

A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).

## Installation

```sh
$ npm i use-isomorphic-layout-effect
```

## Usage 

You only need to switch `useLayoutEffect` with `useIsomorphicLayoutEffect`

```diff
+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
- import { useLayoutEffect } from 'react';


const YourComponent = () => {
+  useIsomorphicLayoutEffect(() => {
-  useLayoutEffect(() => {
    // your implementation
  }, []);
};
```

---
_Source: https://npm.io/package/use-isomorphic-layout-effect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._