</>
typescriptbeginner

useIsomorphicLayoutEffect Hook

Safely uses useLayoutEffect on client and useEffect on server to avoid SSR warnings.

typescript
import { useEffect, useLayoutEffect } from 'react';

/**
 * useLayoutEffect on the client, useEffect on the server.
 * Prevents the 'useLayoutEffect does nothing on the server' warning.
 */
export const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

// Usage:
// useIsomorphicLayoutEffect(() => {
//   // Measure DOM, set initial positions, etc.
//   const rect = ref.current?.getBoundingClientRect();
//   setSize({ width: rect?.width ?? 0, height: rect?.height ?? 0 });
// }, []);

Use Cases

  • DOM measurement before paint
  • SSR-safe layout effects

Tags

#hooks#ssr#layout-effect#isomorphic

Related Snippets

Similar patterns you can reuse in the same workflow.

typescriptintermediate

useFetch — Generic Data Fetching Hook

Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.

Best for: API data fetching

#hooks#fetch
typescriptbeginner

useDebounce — Debounced Value Hook

Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.

Best for: Search-as-you-type

#hooks#debounce
typescriptintermediate

useLocalStorage — Persistent State Hook

Sync React state with localStorage including SSR safety, JSON serialization, and cross-tab updates.

Best for: User preferences

#hooks#localstorage
typescriptbeginner

useClickOutside — Outside Click Detection

Detect clicks outside a referenced element to close dropdowns, modals, and popover menus.

Best for: Dropdown menus

#hooks#click-outside