JAVASCRIPT
Handle SSR Safely with `useIsomorphicLayoutEffect`
Use `useIsomorphicLayoutEffect` to safely run layout-dependent effects on both client and server, preventing issues in Server-Side Rendered (SSR) React applications.
import { useEffect, useLayoutEffect } from 'react';
// Use `useLayoutEffect` on the client, `useEffect` on the server
// This prevents a warning when server-side rendering with `useLayoutEffect`
// as `useLayoutEffect` requires access to the DOM.
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export default useIsomorphicLayoutEffect;
How it works: The `useIsomorphicLayoutEffect` hook provides a solution for safely using `useLayoutEffect` in applications that employ Server-Side Rendering (SSR). `useLayoutEffect` is crucial for effects that need to measure or manipulate the DOM synchronously after all DOM mutations are applied but before the browser paints. However, it throws a warning or error during SSR because there's no DOM available. This custom hook conditionally uses `useLayoutEffect` when running in a browser environment (where `window` is defined) and falls back to `useEffect` for server-side execution, thus preventing SSR issues while retaining the critical timing of `useLayoutEffect` on the client.