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.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Wie React 18 Time-Slicing und Prioritätslanes nutzt, um die UI reaktionsfähig zu halten.
Concurrent Rendering ist React 18s Fähigkeit, mehrere Versionen der Benutzeroberfläche gleichzeitig vorzubereiten und lang laufende Renderings zu unterbrechen, um dringendere Updates zu verarbeiten. Anstatt dass Rendering ein einziger synchroner Vorgang ist, der den Haupt-Thread blockiert, kann React jetzt Render-Arbeit mitten im Baum pausieren, dem Browser die Kontrolle übergeben, dringende Updates verarbeiten und dann die pausierte Arbeit fortsetzen oder verwerfen.
Reacts Fiber-Reconciler stellt jede Komponente als kleine Arbeitseinheit (einen Fiber) dar. Die Render-Phase verarbeitet einen Fiber nach dem anderen und prüft nach jeder Einheit, ob höher-priorisierte Arbeit eingetroffen ist. Falls ja, kann es pausieren und später weitermachen.
Reacts Scheduler unterteilt Render-Arbeit in kleine Chunks. Nach jedem Chunk gibt es die Kontrolle zurück an den Browser — was Eingabeereignisse, Animationen und Paints ermöglicht. Dies verhindert, dass die Benutzeroberfläche während langer Renderings einfriert.
React 18 verwendet ein 'Lanes'-Modell, um Updates nach Priorität zu klassifizieren: SyncLane (Benutzereingabe, muss sofort erfolgen), InputContinuousLane (fortlaufende Gesten), DefaultLane (normale Zustandsupdates), TransitionLane (nicht-dringende UI-Übergänge).
Wenn ein hochprioritäres Update eintrifft, während React an einem niederprioritären Rendering arbeitet, pausiert React die niederprioritäre Arbeit, verarbeitet das hochprioritäre Update vollständig (einschließlich Commit) und setzt dann die niederprioritäre Arbeit fort oder startet sie neu.
Da die Render-Phase rein ist (keine Seiteneffekte), kann React teilweise abgeschlossene Renderings sicher verwerfen und neu starten, ohne den Anwendungszustand zu beschädigen. Seiteneffekte finden nur in der Commit-Phase statt, die nie unterbrochen wird.
Render-Arbeit in ~5ms-Chunks aufteilen und dem Browser zwischen Chunks die Kontrolle übergeben. Hält die Benutzeroberfläche während teurer Renderings reaktionsfähig.
Ein Bitmask-System, das Updates von SyncLane (dringendste) bis OffscreenLane (am wenigsten dringend) klassifiziert. Bestimmt die Planungsreihenfolge.
Reacts interner Aufgabenplaner. Verwaltet eine Prioritätswarteschlange von Render-Aufgaben und entscheidet, woran als nächstes basierend auf Priorität und Fristen gearbeitet wird.
API zum Markieren eines Zustandsupdates als nicht-dringenden Übergang. Teilt React mit, dass diese Arbeit für dringendere Updates unterbrochen werden kann.
Hook, der startTransition plus ein isPending-Boolean bereitstellt, das anzeigt, ob ein Übergang in Bearbeitung ist.
1import { useState, useTransition } from 'react';23function SearchPage() {4 const [query, setQuery] = useState('');5 const [results, setResults] = useState([]);6 const [isPending, startTransition] = useTransition();78 function handleInput(e) {9 // Urgent: update the input immediately10 setQuery(e.target.value);1112 // Non-urgent: filtering 10,000 results can wait13 startTransition(() => {14 setResults(filterItems(e.target.value));15 });16 }1718 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)
Vor React 18 würde jedes Zustandsupdate, das ein langsames Rendering auslöste, die gesamte Benutzeroberfläche einfrieren, bis das Rendering abgeschlossen war. Concurrent Rendering bedeutet, dass das Tippen in ein Eingabefeld, Scrollen und Klicken auf Schaltflächen reaktionsfähig bleiben, auch während React ein komplexes Update im Hintergrund berechnet. Dies ist das Fundament von Suspense, Streaming SSR und React Server Components.
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.
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.
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.
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.
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.
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.