JAVASCRIPT
React useIsomorphicLayoutEffect for SSR-Friendly Layout Effects
Use this custom hook to safely apply `useLayoutEffect` logic in both client-side and server-side rendering environments without warnings.
import { useEffect, useLayoutEffect } from 'react';
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export { useIsomorphicLayoutEffect };
How it works: `useLayoutEffect` runs synchronously after all DOM mutations but before the browser paints. This is crucial for certain DOM measurements or manipulations to prevent visual inconsistencies. However, `useLayoutEffect` throws a warning when used in a server-side rendering (SSR) environment where `window` is undefined. The `useIsomorphicLayoutEffect` hook conditionally uses `useLayoutEffect` on the client and gracefully falls back to `useEffect` on the server, avoiding warnings while preserving the correct behavior on the client.