When will you use this?

Use when your React app must talk to a real backend or show live updates.

• React frontends talk to .NET, Node, or Java APIs — fetch and auth are daily tasks.
• Live chat and stock tickers use WebSockets or SignalR with React state.

Real-world: live order alerts for sellers

Flipkart seller hub uses SignalR hub — new order event pushes to React state, toast appears without polling.

Production-style code

import * as signalR from '@microsoft/signalr';

function useOrderAlerts(onNewOrder) {
  useEffect(() => {
    const conn = new signalR.HubConnectionBuilder()
      .withUrl('/hubs/orders')
      .withAutomaticReconnect()
      .build();
    conn.on('NewOrder', onNewOrder);
    conn.start();
    return () => { conn.stop(); };
  }, [onNewOrder]);
}

function SellerDashboard() {
  const [orders, setOrders] = useState([]);
  useOrderAlerts(order => setOrders(prev => [order, ...prev]));
  return <OrderFeed orders={orders} />;
}

What happens in production: Real-time dashboards for .NET backends often use SignalR — natural fit with React SPAs.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

import * as signalR from '@microsoft/signalr';

const connection = new signalR.HubConnectionBuilder()
  .withUrl('/hubs/notifications')
  .withAutomaticReconnect()
  .build();

connection.on('ReceiveMessage', msg => setMessages(m => [...m, msg]));
await connection.start();

Line-by-line walkthrough

How it works (big picture)

• Hub on ASP.NET Core sends ReceiveMessage.
• React listens and updates state.
• AutomaticReconnect handles dropped WiFi.

Do this on your computer

1. Set up Hub on ASP.NET Core backend.
2. npm install @microsoft/signalr
3. Start connection in useEffect with cleanup stop().
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running SignalR and inspect component props/state.

Remember

SignalR = real-time hub for .NET + React. useEffect for connect/disconnect. Show connection status to users.

Common questions