High-Frequency Data in React

Rendering high-frequency data—like live market prices updating hundreds of times per second—is notoriously difficult in React. The standard state-update cycle is simply too slow and causes massive garbage collection spikes, leading to dropped frames.

Bypassing React State

To solve this in the Infirow Algo Trading platform, we completely bypass React's useState for real-time price ticks. Instead, we open a persistent WebSocket connection inside a custom hook, and mutate DOM nodes directly using useRef.

// Simplified example
const priceRef = useRef<HTMLSpanElement>(null);

useEffect(() => {
  socket.on('tick', (data) => {
    if (priceRef.current) {
      priceRef.current.textContent = data.price.toFixed(2);
      // We also update CSS variables for flash colors (green/red)
    }
  });
}, []);

Canvas over DOM

For our advanced charting engine, we completely abandoned the DOM. We built a custom WebGL rendering pipeline using Three.js and React Three Fiber. This allows us to push the heavy lifting to the GPU, maintaining a lockstep 60 FPS even when rendering millions of historical data points alongside live ticks.

The Importance of Performance

In trading, lag is literally lost money. By treating React as a layout engine rather than a strict data-binding layer, we achieved institutional-grade performance directly in the browser.