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

ReactINTERMEDIATELOWUpdated Dec 8, 2025· 108 views

This warning appears during server-side rendering when useLayoutEffect is called, because layout effects cannot run on the server where there is no DOM. React falls back to useEffect behavior, which can cause hydration mismatches between server and client renders.

Quick fix

Fixes 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.

import { useEffect, useLayoutEffect } from 'react';

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

export default useIsomorphicLayoutEffect;
  1. Create a useIsomorphicLayoutEffect custom hook
  2. Replace useLayoutEffect with useEffect if timing is not critical
  3. Delay rendering until after hydration with isMounted flag
  4. Mark component as client-only in Next.js
react — error
import { useEffect, useLayoutEffect } from 'react';
const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export default useIsomorphicLayoutEffect;
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.

What this error means

This warning occurs when you use React's useLayoutEffect hook in a component that is being server-side rendered (SSR). The useLayoutEffect hook is designed to run synchronously after all DOM mutations but before the browser paints the screen, allowing you to read layout information and re-render synchronously if needed. However, on the server there is no DOM, no layout information, and no browser paint cycle. The server is generating HTML strings, not manipulating actual DOM nodes. When React encounters useLayoutEffect during server rendering, it cannot execute it because the underlying browser APIs don't exist in the Node.js environment. React falls back to treating useLayoutEffect like useEffect during SSR, but warns you about this behavior because it can lead to hydration mismatches. The initial server-rendered HTML won't include the effects of your layout effect, but when the component hydrates on the client, useLayoutEffect will run and potentially change the UI, causing a flash of incorrect content or hydration warnings.

Typical symptoms

  • Console warning "useLayoutEffect does nothing on the server" during SSR or Next.js builds
  • Hydration mismatch warnings when the page loads in the browser
  • Flash of unstyled or incorrectly positioned content after initial page load
  • Component appears differently on initial server render versus after client hydration
  • Warning mentions "effect cannot be encoded into the server renderer's output format"
  • Build processes show warnings when using frameworks like Next.js, Remix, or Gatsby
  • Third-party libraries trigger warnings when used in SSR environments

Common causes

  1. Using useLayoutEffect directly in components that render on the server
  2. Third-party libraries (like react-dnd, framer-motion, recharts) using useLayoutEffect internally
  3. Measuring DOM elements or reading layout information during server rendering
  4. Synchronizing component state with browser-only APIs during SSR
  5. Not checking for browser environment before using layout-dependent hooks
  6. Attempting to manipulate DOM nodes that don't exist on the server
  7. Using hooks designed for client-side interactivity in universal/isomorphic components
  8. Not properly handling hydration boundaries in Next.js App Router or similar frameworks

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."

1Create a useIsomorphicLayoutEffect custom hook

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:

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

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

export default useIsomorphicLayoutEffect;

Then replace all useLayoutEffect calls with this custom hook:

typescript
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';

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

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

2Replace useLayoutEffect with useEffect if timing is not critical

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

typescript
// 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.

3Delay rendering until after hydration with isMounted flag

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

typescript
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.

4Mark component as client-only in Next.js

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

typescript
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.

5Use useSyncExternalStore for external data synchronization

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

typescript
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.

6Suppress warnings for third-party libraries

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

typescript
// 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.

7Verify no hydration mismatches after fixing

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

bash
# 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.

Advanced notes

Framework-Specific Considerations:

In Next.js App Router (React Server Components), this warning is less common because Client Components are clearly marked with "use client" directives. However, it can still occur when mixing server and client boundaries incorrectly.

In Remix, the warning often appears with third-party UI libraries. Remix's streaming SSR architecture makes the useIsomorphicLayoutEffect pattern even more important.

The Isomorphic Layout Effect Debate:

There's ongoing discussion in the React community about whether the useIsomorphicLayoutEffect pattern is a good practice. Some argue it's a necessary pragmatic solution, while others (including some React core team members) suggest it can hide real bugs. The article "There's no such thing as an isomorphic layout effect" by Sean Mores explains why this pattern might not be semantically correct for all use cases.

Performance Impact:

Switching from useLayoutEffect to useEffect changes when your code runs. useLayoutEffect blocks the browser paint, while useEffect runs after paint. If you're measuring and adjusting layout, using useEffect can cause a visible flash of incorrect layout. The useIsomorphicLayoutEffect pattern preserves the correct timing on the client while avoiding SSR warnings.

Libraries Known to Trigger This Warning:

Common libraries that may cause this warning include: react-dnd, framer-motion, react-hook-form, recharts, react-redux (older versions), and react-google-maps. Many have fixed or are working on fixes. Always check for library updates before implementing workarounds.

Frequently asked questions

What does "Warning: useLayoutEffect does nothing on the server, because its effec" mean?
This warning occurs when you use React's useLayoutEffect hook in a component that is being server-side rendered (SSR). The useLayoutEffect hook is designed to run synchronously after all DOM mutations but before the browser paints the screen, allowing you to read layout information and re-render synchronously if needed. However, on the server there is no DOM, no layout information, and no browser paint cycle.
How do I fix "Warning: useLayoutEffect does nothing on the server, because its effec"?
This warning appears during server-side rendering when useLayoutEffect is called, because layout effects cannot run on the server where there is no DOM. React falls back to useEffect behavior, which can cause hydration mismatches between server and client renders.
What causes "Warning: useLayoutEffect does nothing on the server, because its effec"?
Using useLayoutEffect directly in components that render on the server Third-party libraries (like react-dnd, framer-motion, recharts) using useLayoutEffect internally Measuring DOM elements or reading layout information during server rendering
Is the "Warning: useLayoutEffect does nothing on the server, because its effec" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading