How I Kept a Live Chat Feed Smooth at 3,700+ Messages

I built LiveShop , a mini live-shopping stream UI, to answer a question I kept running into as a frontend-curious grad: tutorials teach you how to render a list, but they never teach you what happens when that list gets hit with the kind of traffic a real live stream produces. So I built something that would force the problem to show up, then fixed it, then measured whether the fix actually worked. The setup LiveShop simulates a live-shopping broadcast - the kind of interface a small merchant might use to sell products while streaming. A mock event engine fires chat messages, reactions, and purchase notifications on an interval, standing in for what a real WebSocket connection to a streaming backend would deliver. On top of that sits a chat feed, a scrollable product carousel, and a floating reaction animation layer. None of that is unusual. The interesting part started once I asked: what happens when message volume spikes? Where it breaks A naive chat feed is just messages.map(m => <ChatRow key={m.id} {...m} />) . It's the first thing anyone reaches for, and it's fine — right up until it isn't. At 50 messages, nothing looks wrong. At a few hundred, every new message triggers a full re-render pass across every row in the DOM, including the hundreds that have already scrolled out of view and that nobody can see. The browser is doing layout and paint work for pixels that aren't on screen. In a real live stream, this is exactly the wrong failure mode, because message volume doesn't arrive evenly. It spikes — right after a product drop, right when something funny happens on stream, right when a popular creator says something quotable. That's precisely the moment a chat feed can't afford to stutter, and precisely the moment a naive implementation is most likely to. What I measured Rather than guess whether this mattered, I built a way to test it directly. LiveShop has a "Simulate spike" button that fires 500 messages instantly, plus a live FPS readout using requestAnimat