How Things Work

Concurrent Rendering

React 18 time slicing aur priority lanes se UI ko responsive kaise rakhta hai.

How It Works

Concurrent rendering React 18 ki woh capability hai jo ek saath UI ke multiple versions tayaar kar sakti hai aur zyada urgent updates handle karne ke liye lambe-chalte renders ko interrupt kar sakti hai. Ek single synchronous operation ki jagah jo main thread block kare, React ab render work ko tree ke beech mein pause kar sakta hai, browser ko yield kar sakta hai, urgent updates handle kar sakta hai, phir paused work resume ya discard kar sakta hai.

Fiber architecture interruptibility enable karta hai

React ka Fiber reconciler har component ko kaam ki ek chhoti unit (ek fiber) ki tarah represent karta hai. Render phase ek baar mein ek fiber process karta hai, har unit ke baad check karta hai ki koi higher-priority kaam aaya hai ya nahi. Agar aaya hai, toh woh pause karke baad mein aa sakta hai.

Time-slicing: React browser ko har ~5ms mein yield karta hai

React ka scheduler render work ko chhote chunks mein todta hai. Har chunk ke baad, woh browser ko control wapas deta hai — jisse input events, animations aur paints ho sakein. Isse lambe renders ke dauran UI freeze nahi hota.

Priority lanes updates ko urgency assign karte hain

React 18 updates ko priority ke hisaab se classify karne ke liye ek 'lanes' model use karta hai: SyncLane (user input, turant hona chahiye), InputContinuousLane (ongoing gestures), DefaultLane (normal state updates), TransitionLane (non-urgent UI transitions).

Higher priority updates lower priority wale interrupt karte hain

Agar ek high-priority update aata hai jab React low-priority render par kaam kar raha hota hai, toh React low-priority kaam pause karta hai, high-priority update completely process karta hai (commit bhi), phir low-priority kaam resume ya restart karta hai.

Discarded renders ke koi visible side effects nahi hote

Kyunki render phase pure hai (koi side effects nahi), React safely partially-completed renders discard karke unhe restart kar sakta hai bina application state corrupt kiye. Side effects sirf commit phase mein hote hain, jo kabhi interrupt nahi hota.

Key Concepts

⏱️Time Slicing

Render work ko ~5ms chunks mein todna aur chunks ke beech browser ko yield karna. Expensive renders ke dauran UI ko responsive rakhta hai.

🛣️Priority Lanes

Ek bitmask system jo updates ko SyncLane (sabse urgent) se OffscreenLane (sabse kam urgent) tak classify karta hai. Scheduling order determine karta hai.

📅Scheduler

React ka internal task scheduler. Render tasks ki ek priority queue manage karta hai aur priority aur deadlines ke basis par decide karta hai ki aage kya karna hai.

🔀startTransition

Ek state update ko non-urgent transition mark karne ka API. React ko batata hai ki yeh kaam urgent updates ke liye interrupt kiya ja sakta hai.

🕐useTransition

Hook jo startTransition ke saath ek isPending boolean bhi deta hai jo batata hai ki koi transition in progress hai ya nahi.

Non-urgent updates ke liye startTransition

tsx

1import { useState, useTransition } from 'react';
2
3function SearchPage() {
4  const [query, setQuery] = useState('');
5  const [results, setResults] = useState([]);
6  const [isPending, startTransition] = useTransition();
7
8  function handleInput(e) {
9    // Urgent: update the input immediately
10    setQuery(e.target.value);
11
12    // Non-urgent: filtering 10,000 results can wait
13    startTransition(() => {
14      setResults(filterItems(e.target.value));
15    });
16  }
17
18  return (
19    <>
20      <input value={query} onChange={handleInput} />
21      {isPending && <Spinner />}
22      <ResultsList results={results} />
23    </>
24  );
25}
26// Typing feels instant (urgent update)
27// Results update when React has time (transition)

💡

Why This Matters

React 18 se pehle, koi bhi state update jo slow render trigger karta tha, poori UI rendering complete hone tak freeze kar deta tha. Concurrent rendering ka matlab hai ki input type karna, scroll karna, aur buttons click karna responsive rehte hain chahe React background mein ek complex update compute kar raha ho. Yeh Suspense, streaming SSR, aur React Server Components ki neenv hai.

Common Pitfalls

⚠startTransition slow renders ko fast nahi banata — bas unhe non-blocking banata hai. Agar aapka render slow hai, toh use memoization ya virtualization se optimize karo.

⚠Render phase code ab multiple baar run ho sakta hai (React ek paused render restart kar sakta hai). Pakka karo ki aapke render functions truly pure hain aur koi side effects nahi hain.

⚠Saare React 18 features default se concurrent nahi hain. Concurrent features enable karne ke liye createRoot() use karna zaroori hai (legacy ReactDOM.render() nahi).

Real-World Use Cases

1Search-as-You-Type Without Debouncing

Scenario

A product catalog with 50,000 items needs instant search. Using debounce (300ms delay) feels sluggish. Without debounce, every keystroke triggers a heavy filter that blocks the main thread and makes typing lag.

Problem

Traditional approach: debounce → wait 300ms → filter → re-render. The user types 'laptop' and sees nothing for 300ms after each keystroke. Or without debounce: type 'l' → 50ms filter blocks thread → 'a' keystroke is delayed → laggy typing experience.

Solution

Use `startTransition` to mark the filter as non-urgent. React processes the input update immediately (typing stays responsive), then renders the filtered results when the main thread is free. If the user types another character before the filter completes, React ABANDONS the in-progress render and starts the new filter — no wasted work.

💡

Takeaway: Concurrent rendering replaces debouncing for CPU-heavy UI updates. It provides a better UX (no artificial delay) with better performance (abandoned renders waste no DOM work). Use useTransition for filtering, sorting, and computing derived state.

2Keeping Navigation Responsive During Heavy Page Renders

Scenario

Clicking a navigation link to a data-heavy dashboard page freezes the UI for 500ms while the new page renders 200+ chart components. The old page disappears, a blank screen shows, then the new page appears — jarring.

Problem

Without concurrent rendering, React must complete the entire render synchronously. Clicking 'Dashboard' unmounts the current page and starts rendering 200 charts. The main thread is blocked for 500ms — no animations, no response to user input, just a white flash.

Solution

Wrap the navigation in `startTransition(() => navigate('/dashboard'))`. React keeps the old page visible and interactive while rendering the dashboard in the background. If the user clicks 'Back' during this time, React abandons the dashboard render. The transition completes smoothly with no blank screen.

💡

Takeaway: Concurrent rendering enables 'optimistic UI' for navigation — the old page stays visible until the new one is fully ready. This eliminates white-flash navigation transitions and lets users cancel slow navigations by clicking elsewhere. Next.js App Router uses this pattern by default.

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.