How to Build a Live Stock Price Dashboard in ReactJs That Updates in Milliseconds? (Code + GitHub)

Traders don’t wait seconds for price updates; they expect changes in milliseconds.

With high-frequency trading, instant alerts, and algorithm-based investing becoming normal, a real time stock dashboard is a necessity.

It’s the backbone of modern trading platforms, investment apps, and internal market tools. When markets move fast, your UI must move faster.

How do live stock prices affect decision-making?

When stock prices update instantly, traders make better moves. Millisecond price updates can:

• Reveal momentum shifts early.
• Signal breakout zones.
• Protect users from sudden market drops.
• Improve algorithm accuracy.

A real time data dashboard ensures users always see the truth.

Where React + WebSockets outperform REST APIs?

React + WebSockets offer a massive performance advantage:

• WebSockets maintain a live connection, sending new prices instantly.
• React re-renders only the components that change, keeping the UI smooth and fast.
• No repeated fetch calls like REST to save bandwidth and improve speed.

This is why most modern fintech startups and trading apps prefer React WebSocket stock dashboards over REST polling.

What Will You Build? A Fast Stock Price Dashboard in ReactJS

You’ll build a sleek, modern live stock price dashboard that updates in milliseconds using a WebSocket feed.

The moment the server pushes new data, the UI updates instantly. Features your React stock dashboard will have. Your dashboard will include:

• Live price ticker that streams market updates.
• Real-time stock chart that auto-scrolls.
• Auto-refresh engine powered by WebSocket events.
• Smart error handling when the server disconnects.
• Connection status indicators (connected, reconnecting, offline).
• Clean UI optimized for performance.

This makes your project perfect for trading apps, finance SaaS dashboards, startup prototypes, and investment tools.

Why ReactJS + WebSocket API Is the Perfect Combo for Real-Time Finance?

How Do WebSockets Keep Connections alive?

• REST APIs send data only when you request it.
• WebSockets keep a constant connection open, pushing new stock prices the moment they change.
• This makes them perfect for stock markets where every millisecond matters.

Why React’s component reactivity is ideal for stock markets?

• React’s state system updates only the components that change, not the entire UI.
• This is crucial when hundreds of stock prices are updating many times per second.
• This combination powers a smooth, stable, and fast real-time stock price ReactJS experience.

Comparison Between WebSocket vs REST polling vs SSE

For real-time finance, WebSockets win every time, which is why your React WebSocket stock dashboard will run millisecond-level updates.

Learn to Build Zerodha Stock Trading App Clone in ReactJs.

How Data Flows in a Real-Time Stock Price Dashboard?

Easy diagram of live data flow

WebSocket Server → Live Price Stream → React State → Real-Time Chart UI

Client-side structure

Your stock market dashboard React app will include:

• WebSocketService.js(Handles connection & messages)
• Ticker.js(Displays fast-moving stock prices)
• LiveChart.js(Renders the real-time price chart)
• Dashboard.js(Main layout)
• App.js(App container)

This modular design keeps everything clean and scalable.

WebSocket price stream

• Each new price received from the WebSocket instantly updates the UI.
• No refresh. No delay. No repeated API calls.

Chart rendering logic

• The real time stock price tracker uses a chart library like Recharts or Chart.js, where new points are added live.
• Old data scrolls smoothly as new prices arrive, just like a real trading platform.

Step 1: Setting Up Your React Project (Best Practices for Performance)

Before building a real-time dashboard, you must set up a clean, scalable React project.

A proper structure helps you handle fast WebSocket stock price updates without slowing down your app.

Clean Project Architecture

For a trading dashboard, your structure should separate UI components, WebSocket services, and utility logic.

This keeps your code clean and prevents slowdowns during live updates.

Folder Structure

/src
┣ /components
┃ ┣ LiveTicker.js
┃ ┣ LiveChart.js
┃ ┗ MarketStatus.js
┣ /services
┃ ┗ WebSocketService.js
┣ /hooks
┃ ┗ useWebSocket.js
┣ /utils
┃ ┗ formatNumber.js
┣ App.js
┗ index.js

This structure keeps your real time stock updates ReactJS app organized and scalable.

Installing Dependencies

Run this to install React + WebSocket + chart library:

npm install recharts

If you prefer Chart.js:

npm install chart.js react-chartjs-2

You don’t need extra packages for WebSockets; the browser supports it natively.

Step 2: Connecting to a Live WebSocket API for Stock Data

To receive WebSocket stock price updates, you need to connect to a real-time streaming API. Below is simple, reusable WebSocket connection code.

WebSocketService.js

            
                // /src/services/WebSocketService.js
                export const connectWebSocket = (onMessage, onStatusChange) => {
                const socket = new WebSocket("wss://your-stock-websocket-url");
                
                socket.onopen = () => {
                    console.log("WebSocket Connected");
                    onStatusChange("connected");
                };
                
                socket.onmessage = (event) => {
                    const data = JSON.parse(event.data);
                    onMessage(data);
                };
                
                socket.onclose = () => {
                    console.log("WebSocket Closed. Reconnecting...");
                    onStatusChange("reconnecting");
                
                    setTimeout(() => {
                    connectWebSocket(onMessage, onStatusChange);
                    }, 1000);
                };
                
                socket.onerror = () => socket.close();
                
                return socket;
                };

            
        

How Does the connection work?

• Onopen: Connection successful.
• Onmessage: You receive new stock prices.
• Onclose: Auto-reconnect logic.
• Onerror: Prevent crashes.

This ensures your dashboard never goes offline, even if the server disconnects.

Step 3: Displaying Live Stock Prices in Milliseconds

React must update live prices without re-rendering too often. Otherwise, your dashboard will lag.

Live Price Hook (Highly Optimized)

            
                // /src/hooks/useLivePrice.js
                    import { useEffect, useRef, useState } from "react";
                    
                    export const useLivePrice = () => {
                    const [price, setPrice] = useState(0);
                    const lastUpdate = useRef(Date.now());
                    
                    const updatePrice = (newPrice) => {
                        const now = Date.now();
                    
                        // Throttle updates to avoid overload
                        if (now - lastUpdate.current > 10) {
                        setPrice(newPrice);
                        lastUpdate.current = now;
                        }
                    };
                    
                    return { price, updatePrice };
                    };
            
        

This allows millisecond-level updates without freezing the UI.

Step 4: Adding a Live Stock Chart (React + Chart.js / Recharts)

A live stock price chart React must update smoothly even when thousands of new points arrive. Below is a clean example using Recharts.

LiveChart.js

            
                // /src/components/LiveChart.js
                import { useEffect, useState } from "react";
                import { LineChart, Line, XAxis, YAxis, Tooltip } from "recharts";
                
                const LiveChart = ({ stream }) => {
                const [data, setData] = useState([]);
                
                useEffect(() => {
                    setData((prev) => [...prev.slice(-80), stream]); // Keep only last 80 points
                }, [stream]);
                
                return (
                    <LineChart width={600} height={300} data={data}>
                    <XAxis dataKey="time" hide />
                    <YAxis domain={["dataMin", "dataMax"]} />
                    <Tooltip />
                    <Line
                        type="monotone"
                        dataKey="price"
                        stroke="#4caf50"
                        dot={false}
                    />
                    </LineChart>
                );
                };
                
                export default LiveChart;

            
        

How does this work?

• New data is streamed into the chart
• Old data scrolls away (TradingView-style)
• Only 80 points are rendered → no lag
• Line chart updates instantly

Step 5: Creating a Full Real-Time Stock Dashboard UI

Now that everything is ready, let’s build the full UI. Your dashboard includes:

• Live ticker
• Real-time chart
• Stock metadata
• Market status indicators
• Error alerts (if WebSocket disconnects)

Dashboard.js

            
                // /src/components/Dashboard.js
                import { useState } from "react";
                import LiveChart from "./LiveChart";
                import { connectWebSocket } from "../services/WebSocketService";
                import { useLivePrice } from "../hooks/useLivePrice";
                
                const Dashboard = () => {
                const { price, updatePrice } = useLivePrice();
                const [status, setStatus] = useState("connecting");
                const [streamData, setStream] = useState({ time: 0, price: 0 });
                
                const socket = connectWebSocket((data) => {
                    updatePrice(data.price);
                
                    setStream({
                    time: new Date().toLocaleTimeString(),
                    price: data.price,
                    });
                }, setStatus);
                
                return (
                    <div style={{ padding: "20px" }}>
                    <h2>Real-Time Stock Dashboard (React + WebSocket)</h2>
                
                    <p>Status: <strong>{status}</strong></p>
                    <p>Live Price: <strong>${price}</strong></p>
                
                    <LiveChart stream={streamData} />
                    </div>
                );
                };
                
                export default Dashboard;


            
        

This creates a complete real-time stock dashboard UI with live charts and tickers.

Step 6: Boosting Dashboard Performance to Handle High-Speed Data

A real-time dashboard must stay fast even when receiving thousands of updates. Here are the important optimization techniques.

1. Debouncing vs Throttling

• Throttling: Update the UI at fixed intervals (best for charts).
• Debouncing: Wait until user interaction stops.
• For stock prices, always use throttling.

2. WebSocket event batching

Instead of updating the chart on every message, group messages together:

            
                let buffer = [];
 
                socket.onmessage = (event) => {
                buffer.push(JSON.parse(event.data));
                };
                
                setInterval(() => {
                if (buffer.length > 0) {
                    processBatch(buffer);
                    buffer = [];
                }
                }, 50);
            
        

This reduces chart redraws.

3. Virtualized Rendering Tricks

• Avoid rendering too many elements in the DOM.
• For long lists of stock data → use react-window or react-virtual.

4. Memory Leak Prevention

Always clean up WebSockets:

            
                useEffect(() => {
                return () => socket.close();
                }, []);
            
        

Without this, your app may crash on repeated navigation.

Here’s the Complete GitHub Code to Build a Real-Time Stock Dashboard in ReactJs that Updates in Milliseconds.

How Do We Create Dashboards That Update in Real-Time?

• Our clean architecture ensures scalable dashboards that stay stable even with high-speed live stock price updates.
• We design live stock price charts in React that auto-scroll, stay smooth, and handle large streaming datasets.
• Our team constantly adopts new innovations in WebSockets, React, and real-time systems to future-proof your product.
• We integrate real-time tickers, metadata panels, and market indicators for a complete trading-grade dashboard UI.

Want a Real-Time Stock Dashboard in ReactJs? Contact Us Now!

How to Add Multiple Stocks, Search, Filters & Theme Mode?

1. Multi-stock selection

• Let users track multiple stocks at once.
• Add a dropdown or searchable list that loads a live chart for each selected stock.

2. Dark/light mode

• Finance users love dark mode as it reduces eye strain.
• Toggling themes instantly improves UX.

3. Stock history replay mode

• Let users “replay” market movement from earlier in the day.
• This feature is great for strategy planning and back testing.

4. Real-time notifications

Trigger alerts when:

• Price crosses a threshold.
• Volume spikes.
• Trend reversals occur.

This turns your dashboard into a real trading assistant.

Build Your Own Trading App Faster

Building a real-time stock dashboard is the first step toward creating a powerful trading app, investment tool, or analytics platform.

With React + WebSockets, you get the perfect blend of speed, scalability, and smooth UX. If you want to build:

• A complete trading platform.
• A finance SaaS product.
• A custom real time stock dashboard.
• Internal analytics for your business.

We can help you design, develop, and scale a full real-time system according to your business needs.