useIsomorphicLayoutEffect

useIsomorphicLayoutEffect is a React hook that runs useLayoutEffect in the browser without triggering its warning during server-side rendering (SSR). During SSR, there is no DOM to synchronously measure or mutate, so using useLayoutEffect triggers a warning on React 18 and earlier. The effect only runs in the browser. This hook only avoids the warning and does not make the server output match the client. React 19 no longer warns, so on React 19 you can use useLayoutEffect directly.

In the browser, it runs synchronously after DOM updates but before paint, making it ideal for:

• Measuring DOM elements after render
• Applying DOM changes before paint
• Preventing UI flashes or layout shifts

Interface

function useIsomorphicLayoutEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void;

Parameters

• effectrequired · React.EffectCallback
  

  The effect function.

• depsReact.DependencyList
  

  An optional array of dependencies.

Return Value

This function does not return anything.

Example

useIsomorphicLayoutEffect(() => {
  // Code to be executed during the layout phase on the client side
}, [dep1, dep2, ...]);