How Things Work

Transitions (useTransition)

Priority-based updates — startTransition se urgent aur non-urgent rendering.

How It Works

useTransition ek React 18 hook hai jo aapko state updates ko 'non-urgent transitions' mark karne deta hai. Urgent updates (typing, clicking) turant process hote hain aur kabhi interrupt nahi hote. Transition updates lower-priority hote hain — agar transition in progress hote waqt koi urgent update aata hai, toh React transition interrupt karta hai, urgent kaam handle karta hai, phir transition restart karta hai. Yeh UI ko responsive rakhta hai chahe heavy re-renders ho rahe hon.

React 18 apne scheduler mein priority lanes add karta hai

React scheduler har update ko ek priority lane assign karta hai: SyncLane (urgent, unbatchable), InputContinuousLane (drag/scroll), DefaultLane (normal setState), aur TransitionLane (useTransition / startTransition). Higher-priority lanes hamesha lower wale ko preempt karte hain.

startTransition updates ko low priority mark karta hai

startTransition(callback) mein ek setState call wrap karna React ko batata hai: 'yeh update ek transition hai — ise interrupt kiya ja sakta hai'. React ise ek TransitionLane mein schedule karta hai aur current UI tab tak visible rakhta hai jab tak transition complete nahi ho jaata.

Urgent update in-progress transition ko interrupt karta hai

Agar user ek aur character type karta hai jab ek 5000-item list transition ki tarah re-render ho rahi hai, toh React transition render ko tree ke beech mein pause karta hai, typing (urgent) turant process karta hai, input update karta hai, phir naye input value ke saath transition scratch se restart karta hai.

isPending batata hai ki transition in-flight hai

useTransition [isPending, startTransition] return karta hai. isPending tab true hota hai jab React transition process kar raha hota hai. UI block kiye bina ek subtle loading indicator dikhane ke liye ise use karo.

useDeferredValue ek derived value defer karta hai

startTransition ka ek alternative: useDeferredValue(value) value ki ek deferred copy return karta hai jo transitions ke dauran peechhe reh jaati hai. UI pehle purane deferred value ke saath render hoti hai (fast), phir jab React ke paas waqt hota hai tab nayi value ke saath re-render hoti hai.

Key Concepts

🛤️Transition Lane

Transition updates ke liye ek low-priority scheduler lane. Kisi bhi higher-priority kaam (user input, sync updates) se preempt ho sakta hai.

🚦startTransition()

Iske callback ke andar setState calls ko non-urgent mark karta hai. Standalone import ki tarah ya useTransition hook se available hai.

⏳isPending

useTransition se boolean. Tab tak true rehta hai jab tak React transition update process kar raha hota hai. Input block kiye bina spinner dikhane ke liye use karo.

🕐useDeferredValue

Ek value ki deferred copy return karta hai. Pehle stale value ke saath render karta hai (instant), idle hone par fresh value ke saath re-render karta hai. Bade lists filter karne ke liye useful.

🔄Interruption & Restart

Jab transition ke beech mein ek urgent update aata hai, React in-progress transition render discard karta hai aur urgent kaam handle karne ke baad ise fresh se restart karta hai.

Search filter ke liye useTransition

tsx

1import { useState, useTransition } from 'react';
2
3function SearchPage() {
4  const [query, setQuery] = useState('');
5  const [results, setResults] = useState(allItems);
6  const [isPending, startTransition] = useTransition();
7
8  function handleChange(e) {
9    // Urgent: update the input immediately (never interrupted)
10    setQuery(e.target.value);
11
12    // Non-urgent: filter 10,000 items as a transition
13    startTransition(() => {
14      setResults(allItems.filter(item =>
15        item.name.includes(e.target.value)
16      ));
17    });
18  }
19
20  return (
21    <>
22      <input value={query} onChange={handleChange} />
23      {isPending && <Spinner />}  {/* subtle loading indicator */}
24      <ResultsList items={results} />
25    </>
26  );
27}

💡

Why This Matters

Transitions se pehle, React saare state updates ek hi priority par render karta tha — ek heavy list re-render input ko saikdon milliseconds ke liye freeze kar sakta tha. Transitions aapko explicitly React ko batane dete hain ki 'user ko input instant feel karna chahiye, lekin results list thoda waqt le sakti hai'. Yeh expensive renders ke saath laggy app aur smooth app ka fark hai.

Common Pitfalls

⚠startTransition callback ke andar async code ke saath kaam NAHI karta. Sirf synchronous setState calls jo directly startTransition ke andar wrap hain, transitions ki tarah mark hote hain.

⚠Transitions synchronous renders interrupt nahi kar sakte. Agar ek component render function mein heavy loop ki wajah se slow render karta hai (async nahi), toh transitions help nahi karenge — aapko useMemo ya virtualization chahiye.

⚠Har state update ko transition mark mat karo — isse scheduling overhead add hota hai. Transitions sirf genuinely heavy renders ke liye reserve karo jahan latency user-perceptible ho (>100ms).

Real-World Use Cases

1Tab Switching Without Losing Current Tab's State

Scenario

A dashboard has tabs: Overview, Analytics, Reports. Clicking 'Analytics' loads heavy chart components. Without transitions, the current tab disappears immediately and the user sees a loading blank until the new tab renders.

Problem

The tab switch calls `setActiveTab('analytics')`, which immediately unmounts the Overview tab and starts rendering Analytics. The heavy chart render blocks the main thread for 300ms. During this time, the user sees a blank panel — the old tab is gone, the new tab isn't ready.

Solution

Wrap the tab switch in `startTransition(() => setActiveTab('analytics'))`. React keeps showing the Overview tab (marked with `isPending` for a subtle opacity/spinner indicator) while rendering Analytics in the background. When ready, it swaps them in a single frame — no blank state.

💡

Takeaway: useTransition is perfect for tab switching, accordion expansions, and any UI where you want the old content to stay visible while new content prepares. The `isPending` boolean lets you show a subtle loading indicator without destroying the current view.

2useDeferredValue for Derived UI Without Restructuring Code

Scenario

A search results component receives `query` as a prop and does heavy filtering inline. You want to defer the results rendering but can't wrap the parent's setState in startTransition because you don't control the parent.

Problem

The parent component calls `setQuery(e.target.value)` directly. You can't add startTransition because you don't own the parent component (maybe it's from a library). Your heavy ResultsList re-renders on every keystroke because `query` prop changes immediately.

Solution

Use `useDeferredValue(query)` in ResultsList: `const deferredQuery = useDeferredValue(query)`. Filter using `deferredQuery` instead of `query`. React returns the old value during heavy renders, showing stale-but-fast results while computing the new filter in the background. Compare `query !== deferredQuery` to show a loading indicator.

💡

Takeaway: useDeferredValue is the consumer-side equivalent of useTransition. Use useTransition when you control the state update (can wrap setState). Use useDeferredValue when you want to defer derived rendering from a prop you don't control.

Join the discussion

Comments

Loading comments...

Cookie preferences

We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.