# useIsomorphicLayoutEffect

> useLayoutEffect on the client, useEffect on the server.

- Category: Effects
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-isomorphic-layout-effect

## Signature

```ts
useIsomorphicLayoutEffect(effect: EffectCallback, deps?: DependencyList): void
```

## Parameters

- `effect`: `EffectCallback` — The effect to run — same contract as React's useLayoutEffect, including an optional cleanup return.
- `deps`: `DependencyList` — Dependency array controlling when the effect re-runs. Omit to run after every render.

## Usage

```tsx
import { useRef, useState } from "react";
import { useIsomorphicLayoutEffect } from "hookli";

export function Demo() {
  const boxRef = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(0);

  useIsomorphicLayoutEffect(() => {
    setWidth(boxRef.current?.offsetWidth ?? 0);
  }, []);

  return <div ref={boxRef}>Measured: {width}px</div>;
}
```

## Source

`src/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.ts`

```ts
import { useEffect, useLayoutEffect } from "react";

/**
 * useLayoutEffect that safely falls back to useEffect on the server, where
 * useLayoutEffect would warn. Picks the layout effect only when a DOM exists.
 */
export const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;
```