How to fix Warning: Prop `key` did not match in React

Warning: Prop `key` did not match. Server: "item-1234" Client: "item-5678"
    in li (at ListComponent.tsx:15)
    in ul (at ListComponent.tsx:12)

// ❌ BAD: Random keys differ between server and client
{items.map(item => (
  <div key={Math.random()}>{item.name}</div>
))}

// ❌ BAD: Timestamp keys differ
{items.map(item => (
  <div key={`${item.id}-${Date.now()}`}>{item.name}</div>
))}

// ✅ GOOD: Use stable, deterministic keys
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

'use client';
import { useState, useEffect } from 'react';

function UserPreferencesList({ items }) {
  const [mounted, setMounted] = useState(false);

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

  // During SSR and initial hydration, use server-safe keys
  if (!mounted) {
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }

  // After hydration, safe to use localStorage
  const savedOrder = localStorage.getItem('itemOrder');
  const sortedItems = sortByPreference(items, savedOrder);

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// ❌ BAD: useId() in conditional loop causes ID sequence mismatch
function BadList({ items, showDetails }) {
  return (
    <ul>
      {items.map(item => {
        const id = useId(); // Different IDs on server vs client!
        return showDetails ? (
          <li key={id}>{item.name}</li>
        ) : null;
      })}
    </ul>
  );
}

// ✅ GOOD: Extract component so useId() is called consistently
function ListItem({ item }) {
  const id = useId();
  return <li key={id}>{item.name}</li>;
}

function GoodList({ items, showDetails }) {
  return (
    <ul>
      {items.filter(() => showDetails).map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

// In Next.js, use consistent data fetching
export async function generateStaticParams() {
  const items = await fetchItems();
  return items.map(item => ({ id: item.id }));
}

export default async function Page({ params }) {
  // Fetch the same data on the server
  const items = await fetchItems();

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function SessionBasedList({ items }) {
  const sessionKey = typeof window !== 'undefined'
    ? sessionStorage.getItem('sessionId')
    : 'server-session';

  return (
    <ul suppressHydrationWarning>
      {items.map(item => (
        <li key={`${sessionKey}-${item.id}`} suppressHydrationWarning>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

# Next.js
npm run build
npm run start

# Then test the affected pages in your browser