5 exercises on React 18 concurrent rendering — Suspense, startTransition, and useDeferredValue.
0 / 5 completed
1 / 5
What does concurrent rendering mean in React 18?
Concurrent rendering: React 18's scheduler can yield the main thread back to the browser mid-render. This prevents long renders from blocking user input, enabling features like transitions and Suspense without freezing the UI.
2 / 5
What does startTransition communicate to React?
startTransition: marking a state update as a transition tells React it can delay or interrupt that render if a higher-priority update (keypress, click) arrives. This keeps search inputs or tab switches responsive while heavy re-renders happen in the background.
3 / 5
What does useDeferredValue do?
useDeferredValue: during a fast-typing scenario, you pass the live input to useDeferredValue. The deferred value trails slightly, so React can show the real input immediately while the expensive list re-renders catch up.
4 / 5
What is the role of Suspense in data fetching with React 18?
Suspense: a component throws a Promise when its data is not ready. The nearest <Suspense fallback={…}> catches it and shows the fallback. When the Promise resolves React retries the render, enabling declarative loading states.
5 / 5
What does useTransition return that startTransition does not?
useTransition: returns [isPending, startTransition]. The isPending flag lets you show an inline spinner or disable a button while the background render is in progress, giving visual feedback without a jarring full-page loading state.