Build a Live Stock Ticker with throttled updates | Interview Question

Q: Build a Live Stock Ticker with throttled updates

**Target Audience:** Developers who know React state and effects and want to understand how to keep a UI smooth when data arrives faster than the screen can draw it. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer listens for. The render counts in the Verified section were measured by running the real solution in React 19.3.1 under `StrictMode` in jsdom. The market feed is simulated with a seeded random walk; nothing touches the network. ## 1. Why This Even Matters — A Story First Imagine a sports commentator who has to read out every single pass in a football match. If the ball moves twenty times a second, he cannot keep up; he stumbles, falls behind and the listeners hear a garbled mess. A good commentator does something smarter: every couple of seconds he says where the ball is **now**. He drops the in-between passes, and nobody minds, because what listeners want is the current

The problem

Question presented to candidate: "We get hundreds of price messages a second over a WebSocket. If we update the table for every message, the page stutters. Build a live ticker for five symbols that coalesces updates, for example once per animation frame or every 250 milliseconds, and show me how many renders actually happen for a burst of messages."

Requirements:

A table of symbols with price, change since open and an up/down marker; a simulated feed (no network) delivering each message in its own task, as a socket would.
A batching mode switch: per animation frame (requestAnimationFrame), a fixed 250 ms throttle, and "off" (one update per message) for comparison.
Between flushes, keep only the latest message per symbol; apply the whole batch in one state update.
A small heads-up display that counts messages, state updates and renders, without the counter itself causing renders.
Stop timers and cancel a pending frame when the component unmounts.

What a strong answer should cover:

Why per-message updates are expensive and why "latest value wins" is safe for prices (but not for an order book or trade log).
Buffering in a non-reactive place (a ref, a plain Map) and scheduling exactly one flush per window.
requestAnimationFrame versus a fixed interval: matching the display refresh versus a predictable cadence and lower CPU in background tabs.
Comparing against the price the user last saw for the up/down arrow, not the previous message.
Measuring render counts, and accessibility for fast-changing numbers (no aria-live spam, colour plus a symbol).

Clarifying questions expected:

"Is it fine to drop intermediate prices, or must every tick be shown (for example in a chart)?"
"How many symbols and messages per second should this handle?"
"Should updates pause when the tab is hidden?"

Code / implementation expected: Yes. A working ticker with the three modes and a render counter.

Real-time
Performance
Throttling

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know React state and effects and want to understand how to keep a UI smooth when data arrives faster than the screen can draw it. Difficulty: Hard

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer listens for. The render counts in the Verified section were measured by running the real solution in React 19.3.1 under StrictMode in jsdom. The market feed is simulated with a seeded random walk; nothing touches the network.

1. Why This Even Matters — A Story First

Imagine a sports commentator who has to read out every single pass in a football match. If the ball moves twenty times a second, he cannot keep up; he stumbles, falls behind and the listeners hear a garbled mess. A good commentator does something smarter: every couple of seconds he says where the ball is now. He dr

The solution is hidden so you can try first

11 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useEffect, useRef, useState } from "react";
import { useTicker } from "./src/hooks/useTicker";
import TickerTable from "./src/components/TickerTable";

export default function App() {
  const [mode, setMode] = useState("raf");
  const { quotes, stats, stream, reset } = useTicker(mode);
  const hud = useRef(null);

  // Runs after every commit of App. It counts renders and writes the HUD
  // straight to the DOM, so measuring does not itself cause renders.
  useEffect(() => {
    const s = stats.current;
    s.renders++;
    hud.current.textContent =
      "Messages: " +
      s.messages +
      " | State updates: " +
      s.updates +
      " | Renders: " +
      s.renders;
  });

  return (
    <main className="app">
      <h1>Live ticker</h1>
      <div className="controls">
        <label>
          Batching{" "}
          <select
            data-testid="mode"
            value={mode}
            onChange={(e) => setMode(e.target.value)}
          >
            <option value="raf">Per animation frame</option>
            <option value="interval">Every 250 ms</option>
            <option value="off">Off (every message)</option>
          </select>
        </label>
        <button data-testid="stream" onClick={() => stream(200)}>
          Stream 200 messages
        </button>
        <button data-testid="reset" onClick={reset}>
          Reset prices
        </button>
      </div>
      <p className="hud" data-testid="hud" ref={hud} aria-live="off" />
      <TickerTable quotes={quotes} />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.