How to fix Warning: useLayoutEffect should not be used 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

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 specifically designed to run synchronously after all DOM mutations but before the browser paints the screen. This timing allows components to read layout information (like element dimensions, positions, or scroll offsets) and synchronously re-render if needed before the user sees anything. However, during server-side rendering, there is no actual DOM, no layout information, and no browser paint cycle. The server is generating static HTML strings, not manipulating live DOM nodes. When React encounters useLayoutEffect during server rendering, it cannot execute the effect because the underlying browser APIs (like getBoundingClientRect, offsetWidth, etc.) don't exist in the Node.js environment. React warns about this because it creates a fundamental mismatch: the server-rendered HTML won't include any changes that useLayoutEffect would make, but when the component hydrates on the client, useLayoutEffect will run and potentially change the UI. This can cause visual "jumps" or layout shifts as content repositions itself after hydration, or worse, hydration errors if the mismatch is too significant.

Typical symptoms

• Console warning "useLayoutEffect should not be used on the server" during SSR builds
• Hydration mismatch warnings when the page loads in the browser
• Visual content "jumps" or shifts position after initial page load
• Flash of unstyled or incorrectly positioned content
• Warning appears in Next.js builds during `next build` or `next dev`
• Components render differently on initial server load versus after hydration
• Third-party libraries trigger warnings when used in SSR environments
• Build processes show warnings when using frameworks like Next.js, Remix, or Gatsby

Common causes

1. Using useLayoutEffect directly in components that render on the server
2. Third-party libraries (react-redux, framer-motion, react-dnd, react-hook-form) using useLayoutEffect internally
3. Measuring DOM elements or reading layout information during server rendering
4. Manipulating DOM nodes or reading browser-only APIs in useLayoutEffect
5. Not distinguishing between server and client rendering environments
6. Using useLayoutEffect to set state based on window dimensions or other browser APIs
7. Component libraries that depend on layout measurements (tooltips, popovers, modals)
8. Migrating from client-only React app to SSR framework without updating hooks

How to fix "Warning: useLayoutEffect should not be used 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."

// lib/hooks/useIsomorphicLayoutEffect.ts
import { useEffect, useLayoutEffect } from 'react';

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

export default useIsomorphicLayoutEffect;

import useIsomorphicLayoutEffect from '@/lib/hooks/useIsomorphicLayoutEffect';

function MyComponent() {
  useIsomorphicLayoutEffect(() => {
    // Your layout effect logic
    const element = document.getElementById('my-element');
    const height = element?.offsetHeight;
    // ...
  }, []);
}

// Before
import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    console.log('Component mounted');
  }, []);
}

// After
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component mounted');
  }, []);
}

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

function ComponentWithLayoutEffect() {
  const [isClient, setIsClient] = useState(false);

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

  useLayoutEffect(() => {
    if (!isClient) return;
    // Safe to use layout effect now
    const element = document.getElementById('my-element');
    const rect = element?.getBoundingClientRect();
    // ...
  }, [isClient]);

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

  return <div>{/* Actual content with layout effects */}</div>;
}

// app/page.tsx
import dynamic from 'next/dynamic';

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

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

// components/ComponentWithLayoutEffect.tsx
'use client';

import { useLayoutEffect, useState } from 'react';

export default function ComponentWithLayoutEffect() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useLayoutEffect(() => {
    // No warning - this only runs on client
    setDimensions({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }, []);

  return <div>Window: {dimensions.width}x{dimensions.height}</div>;
}

import { Suspense } from 'react';

function Page() {
  return (
    <div>
      <h1>Content above suspense renders immediately</h1>
      <Suspense fallback={<div>Loading interactive content...</div>}>
        <ComponentWithLayoutEffect />
      </Suspense>
    </div>
  );
}

# Check current versions
npm list react-redux framer-motion react-hook-form

# Update to latest versions
npm install react-redux@latest framer-motion@latest react-hook-form@latest

Advanced notes

Frequently asked questions

What does "Warning: useLayoutEffect should not be used on the server because its" 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 specifically designed to run synchronously after all DOM mutations but before the browser paints the screen. This timing allows components to read layout information (like element dimensions, positions, or scroll offsets) and synchronously re-render if needed before the user sees anything.

How do I fix "Warning: useLayoutEffect should not be used on the server because its"?

This warning appears when React detects useLayoutEffect during server-side rendering. Since layout effects require a DOM to measure and manipulate, they cannot run on the server, leading to potential hydration mismatches between server and client renders.

What causes "Warning: useLayoutEffect should not be used on the server because its"?

Using useLayoutEffect directly in components that render on the server Third-party libraries (react-redux, framer-motion, react-dnd, react-hook-form) using useLayoutEffect internally Measuring DOM elements or reading layout information during server rendering

Is the "Warning: useLayoutEffect should not be used on the server because its" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• useMemo received a final argument of type `object` instead of

  How to fix "useMemo received invalid dependencies" in React

  MEDIUM

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

  How to fix "useLayoutEffect does nothing on the server" in React

  MEDIUM

• React Hook useMemo has a missing dependency: 'sortOrder'. Either include it or remove the dependency array.

  How to fix "React Hook useMemo has a missing dependency" in React

  MEDIUM

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

  How to fix "useLayoutEffect does nothing on the server" warning in React

  LOW

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Docs: useLayoutEffect – React(Official Docs)
• 📖
  GitHub Gist: useLayoutEffect and server rendering (Dan Abramov)(Official Docs)
• 💬
  GitHub Issue: useLayoutEffect in SSR discussion(Stack Overflow)
• Medium: useLayoutEffect and SSR by Alex Reardon
• Kevin Yank: useEffect vs useLayoutEffect and server-side rendering
• There's no such thing as an isomorphic layout effect