Challenge: Real-Time Stock Dashboard

Build a real-time stock dashboard that stays responsive during heavy chart updates by implementing useTransition and useDeferredValue for smooth concurrent rendering.

We'll cover the following...

Problem statement
- Expected output
Try it yourself

Problem statement

You’re building a micro-dashboard where users can:

Choose a stock symbol (AAPL, TSLA, MSFT, AMZN)
Drag a range slider (100 to 10,000 points)
Watch a live SVG chart update

Right now, every input instantly regenerates and re-renders thousands of data points, freezing the UI.

Your goal is to make interactions buttery-smooth while React handles heavy updates in the background.

Technical requirements:

Use useTransition to schedule heavy recomputation and chart updates as non-urgent.
Use useDeferredValue to defer the frequently changing range value so React doesn’t recompute on every pixel of slider movement.
Display a Updating chart... message while a transition is pending.
Compute thousands of points but render only the first 1000 to the DOM for performance.

Expected output

The slider and dropdown remain instantly responsive.
The chart catches up shortly after each interaction.
Updating chart... appears during deferred work.
No noticeable lag even with 10,000 points.