useLayoutEffect does nothing on the server: the SSR warning that hides a real flash of wrong content
verbatim errorWarning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will cause a mismatch between the initial, non-hydrated UI and the intended UI...
Problem
A component that measured the DOM to position a tooltip broke in Next.js SSR:
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will cause a mismatch between the initial, non-hydrated UI and the intended UI...The warning is accurate and understated: the layout-affecting work silently does not happen server-side, so the pre-hydration HTML can render in the wrong position entirely.
Root cause
useLayoutEffect runs synchronously after DOM mutations — a browser-only concept. On the server there is no DOM, no mutation, no synchronous window; React runs nothing and warns. The component was written client-first (fine) and then imported into a server-rendered tree (the actual bug). Same class: any useLayoutEffect inside a component used by both server and client renders.
fix preview — first 3 of 4 lines (tsx), truncated:
import { useEffect, useLayoutEffect } from 'react';
const useIsomorphicLayoutEffect =
… 1 more line in the fix🔒 the fix — including 3 code blocks — is members-only. $1/mo unlocks everything.