useTransition

import { useState, useTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function selectTab(nextTab: string) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <nav>
        {['home', 'posts', 'settings'].map(t => (
          <button
            key={t}
            onClick={() => selectTab(t)}
            style={{ fontWeight: tab === t ? 'bold' : 'normal' }}
          >
            {t}
          </button>
        ))}
      </nav>
      {isPending && <div>Loading...</div>}
      <TabContent tab={tab} />
    </div>
  );
}

function TabContent({ tab }: { tab: string }) {
  // Simulate expensive render
  const items = Array.from({ length: 1000 }, (_, i) => <p key={i}>{tab} item {i}</p>);
  return <div>{items}</div>;
}

import { useState, useTransition } from 'react';

function FilteredProducts({ products }: { products: { name: string; category: string }[] }) {
  const [category, setCategory] = useState('all');
  const [isPending, startTransition] = useTransition();

  const filtered = category === 'all'
    ? products
    : products.filter(p => p.category === category);

  return (
    <div>
      <select
        value={category}
        onChange={e => {
          startTransition(() => setCategory(e.target.value));
        }}
      >
        <option value="all">All</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
      </select>
      <div style={{ opacity: isPending ? 0.7 : 1 }}>
        {filtered.map(p => <div key={p.name}>{p.name}</div>)}
      </div>
    </div>
  );
}

import { useState, useTransition } from 'react';

function SubmitForm() {
  const [data, setData] = useState<any>(null);
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData: FormData) {
    startTransition(async () => {
      const res = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      });
      const json = await res.json();
      setData(json);
    });
  }

  return (
    <form action={handleSubmit}>
      <input name="email" type="email" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
      {data && <p>Success: {JSON.stringify(data)}</p>}
    </form>
  );
}