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

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

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

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

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

// 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(() => {
    // This runs as useLayoutEffect on client, useEffect on server
    const element = document.getElementById('my-element');
    const height = element?.offsetHeight;
    // ...
  }, []);
}

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

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

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

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

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

  return <div>{/* Actual content */}</div>;
}

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

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

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

// components/ClientOnlyComponent.tsx
import { useLayoutEffect, useState } from 'react';

export default function ClientOnlyComponent() {
  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>;
}

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Suppress client-side warnings
      config.resolve.fallback = {
        ...config.resolve.fallback,
      };
    }
    return config;
  },
};

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>
  );
}