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

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