How to fix Text content does not match server-rendered HTML in React

Warning: Text content did not match. Server: "12:34 PM" Client: "12:35 PM"
    at span
    at TimeDisplay

import { useState, useEffect } from 'react';

function TimeDisplay() {
  const [mounted, setMounted] = useState(false);
  const [currentTime, setCurrentTime] = useState('');

  useEffect(() => {
    setMounted(true);
    setCurrentTime(new Date().toLocaleTimeString());
  }, []);

  // Show nothing or a placeholder during SSR
  if (!mounted) {
    return <span>Loading...</span>;
  }

  return <span>{currentTime}</span>;
}

import { useState, useEffect } from 'react';

function ThemeToggle() {
  const [theme, setTheme] = useState<string | null>(null);

  useEffect(() => {
    // Second pass: get actual theme from localStorage
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
  }, []);

  // First pass: render neutral/default state
  if (theme === null) {
    return <div className="theme-light">Default Theme</div>;
  }

  return <div className={`theme-${theme}`}>Themed Content</div>;
}

// ❌ WRONG: div inside p is invalid HTML
<p>
  <div>Content</div>
</p>

// ✅ CORRECT: Use span or div as parent
<div>
  <div>Content</div>
</div>

// ❌ WRONG: Nested p tags
<p>
  Some text
  <p>Nested paragraph</p>
</p>

// ✅ CORRECT: Use separate blocks
<div>
  <p>Some text</p>
  <p>Second paragraph</p>
</div>

import dynamic from 'next/dynamic';

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

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

import { lazy, Suspense, useState, useEffect } from 'react';

function ClientOnlyWrapper({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted ? <>{children}</> : null;
}

const MapComponent = lazy(() => import('./MapComponent'));

function Page() {
  return (
    <ClientOnlyWrapper>
      <Suspense fallback={<div>Loading map...</div>}>
        <MapComponent />
      </Suspense>
    </ClientOnlyWrapper>
  );
}

function ServerTimestamp() {
  return (
    <time suppressHydrationWarning>
      {new Date().toISOString()}
    </time>
  );
}

// Add a wrapper that React controls completely
function ProtectedContent() {
  return (
    <div suppressHydrationWarning>
      <div>
        {/* Your actual content here */}
        Content that extensions might modify
      </div>
    </div>
  );
}