practiceintermediate
Non-blocking tabs
Three tabs, one renders 4,000 items and blocks the thread. On click the UI freezes and the active tab doesn't respond until it finishes. Use useTransition to keep clicks responsive and show a loading indicator.
Objectives
- 1.Wrap setActiveTab in startTransition
- 2.Use isPending to visually dim the tab that's loading
- 3.Verify that tabs respond instantly even though the list takes time to render
your code
Hint
startTransition marks the setState as non-urgent — React can interrupt it if a more urgent interaction arrives. isPending is true while the transition is in progress.
Related concepts
Was this helpful?
Sign in to give feedback