How to fix Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. in React

The most common solution is to create a hook that uses useLayoutEffect in the browser and useEffect on the server. This pattern is used by many popular libraries:

import { useEffect, useLayoutEffect } from 'react';

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

Then replace all useLayoutEffect calls with this custom hook:

import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';

function MyComponent() {
  useIsomorphicLayoutEffect(() => {
    // Your layout effect logic
  }, []);
}

This eliminates the warning while maintaining synchronous layout reading on the client.

If you don't actually need synchronous layout measurements before paint, simply use useEffect instead:

// Before
useLayoutEffect(() => {
  // Some logic
}, [deps]);

// After
useEffect(() => {
  // Same logic
}, [deps]);

This is appropriate when:
- You're not reading layout information (offsetWidth, getBoundingClientRect, etc.)
- A brief flash of content is acceptable
- The effect doesn't need to block visual updates

React's official documentation suggests this approach when the timing difference doesn't matter.

For components that absolutely require layout effects, delay their rendering until the client-side hydration completes:

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

function ComponentWithLayoutEffect() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useLayoutEffect(() => {
    // Your layout effect logic
  }, []);

  if (!isMounted) {
    return <div>Loading...</div>; // Fallback for SSR
  }

  return <div>Real content with layout effects</div>;
}

This ensures the server and client render the same initial HTML (the loading state), then switches to the real content only on the client.

In Next.js, you can prevent server-side rendering of specific components using dynamic imports with ssr: false:

import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(
  () => import('../components/ComponentWithLayoutEffect'),
  { ssr: false }
);

export default function Page() {
  return <ClientOnlyComponent />;
}

This tells Next.js to skip server rendering for that component entirely, replacing it with a loading fallback during SSR. The component will only render on the client where useLayoutEffect works normally.

If you're using useLayoutEffect to synchronize with external stores or data sources, React 18+ provides useSyncExternalStore which properly handles SSR:

import { useSyncExternalStore } from 'react';

function useMediaQuery(query: string) {
  return useSyncExternalStore(
    (callback) => {
      const mediaQuery = window.matchMedia(query);
      mediaQuery.addEventListener('change', callback);
      return () => mediaQuery.removeEventListener('change', callback);
    },
    () => window.matchMedia(query).matches,
    () => false // Server-side snapshot
  );
}

This hook supports server rendering and prevents hydration mismatches by accepting a separate snapshot for SSR.

If the warning comes from a third-party library you can't modify, suppress it temporarily while the library maintainers fix it:

// In your app entry point or component file
const originalError = console.error;
console.error = (...args) => {
  if (
    typeof args[0] === 'string' &&
    args[0].includes('useLayoutEffect does nothing on the server')
  ) {
    return;
  }
  originalError(...args);
};

Warning: Only use this as a temporary workaround. It hides the symptom but doesn't fix potential hydration issues. Check if the library has an updated version or open an issue with the maintainers.

After implementing your fix, check that you haven't introduced hydration mismatches:

# Run your app and check browser console
npm run dev

Look for warnings like:
- "Text content does not match server-rendered HTML"
- "Hydration failed because the initial UI does not match"
- "There was an error while hydrating"

Also test with React DevTools profiler to ensure your fix doesn't cause unnecessary re-renders or layout thrashing.