🧠 Imagine This:

You’re at a fast-food counter.

• A customer walks up to place a simple order (like fries).
• Suddenly, a big group comes in and places a huge, complex order (like 10 burgers, 5 drinks, 3 wraps...).

If the kitchen starts working on the big order first, the next simple customer will have to wait a long time, just for fries.

🧰 What useTransition Does:

It tells the kitchen (React) something like:

“Hey! This big order is not urgent. Finish quick orders (like fries or typing input) first. Do this big one in the background.”

useTransition is a React hook introduced for concurrent rendering, allowing you to mark some state updates as “non-urgent” — so they don’t block the UI.

const [isPending, startTransition] = useTransition();

.

• startTransition(fn): runs fn() as a low-priority update. (wrap the function )
• isPending: boolean that tells you if the transition is still in progress (useful for showing spinners or disabling buttons).

✅ Example: Filtering a large list

import React, { useState, useTransition } from "react";

export default function SearchList() {
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);

    // non-blocking update
    startTransition(() => {
      const filtered = items.filter((item) => item.includes(value));
      setList(filtered);
    });
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleChange} placeholder="Search..." />

      {isPending && <p>Loading...</p>}

      <ul>
        {list.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

🧠 When to use useTransition:

• When rendering causes UI lag (e.g., large re-renders).