How to fix Warning: Prop `id` did not match. Server: "" Client: ":R1:" in React

// ❌ BAD: Client-only state affects useId()
function MyComponent() {
  const [isOpen, setIsOpen] = useState(true); // true on client, but server might differ
  const id = useId();

  return isOpen ? <div id={id}>Content</div> : null;
}

// ✅ GOOD: Same initial state on server and client
function MyComponent() {
  const [isOpen, setIsOpen] = useState(false); // false on both
  const id = useId();

  return isOpen ? <div id={id}>Content</div> : null;
}

function MyComponent() {
  const [isMounted, setIsMounted] = useState(false);
  const id = useId();

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

  if (!isMounted) {
    return <div>Loading...</div>; // Same on server and client
  }

  return <div id={id}>Client-only content</div>;
}

// ❌ BAD: useId() called conditionally
function MyComponent({ showItems }: { showItems: boolean }) {
  return (
    <>
      {showItems && items.map(() => {
        const id = useId(); // Called different times on server vs client
        return <Item key={id} id={id} />;
      })}
    </>
  );
}

// ✅ GOOD: useId() always called consistently
function MyComponent({ showItems }: { showItems: boolean }) {
  const baseId = useId();

  return (
    <>
      {showItems && items.map((item, index) => {
        const id = `${baseId}-${index}`; // Derive IDs from stable base
        return <Item key={id} id={id} />;
      })}
    </>
  );
}

function ItemWithId({ item }: { item: Item }) {
  const id = useId(); // Always called when component renders
  return <div id={id}>{item.name}</div>;
}

function MyComponent({ showItems }: { showItems: boolean }) {
  return (
    <>
      {showItems && items.map(item => (
        <ItemWithId key={item.id} item={item} />
      ))}
    </>
  );
}

function MyComponent() {
  const id = useId();

  return (
    <div id={id} suppressHydrationWarning>
      {/* Content that differs between server and client */}
    </div>
  );
}

function ThemeToggle() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const id = useId();

  useEffect(() => {
    setTheme(localStorage.getItem('theme') as 'light' | 'dark' || 'light');
  }, []);

  return (
    <button id={id} suppressHydrationWarning>
      Theme: {theme}
    </button>
  );
}

npm install react@latest react-dom@latest

npm install next@latest react@latest react-dom@latest