Published 9 September 20248 min read read

Sync React with SignalR Events

In the previous article, we set up a SignalR hub for real-time cursor tracking in .NET. Now, we’ll integrate SignalR into a React app and manage the real-time cursor data within the React lifecycle.

Three browsers with a cursor on each, connected to a SignalR hub through a React app.

Microsoft already does a great job explaining how to use the SignalR JavaScript client here, so I won’t rehash MSDN. Instead, we’ll focus on integrating SignalR into React's lifecycle.

This article is part of my series “Realtime webapps with SignalR and React".

Realtime Cursor Tracking with .NET and React using SignalR.
Sync React with SignalR Events (You are here).
Improve Signalr and React Performance User Experience.

The Plan: Connecting React to SignalR Hub

Before diving into the code, let’s go over some important considerations when implementing this. We want to keep our solution performant, maintainable, and reusable for future real-time features.

Our solution will include:

A RealtimeCursorContext: This context will centralize all logic and state, avoiding prop drilling. We’ll wrap it around the root or page component to ensure the connection is only created once where it’s needed.
Broadcasting our cursor position: We’ll capture and broadcast the cursor’s position using a custom hook. Hooks are perfect for isolating logic, and by including this in our context, we ensure that every time we use real-time cursor features, our own cursor is broadcasted.
State management: The events received from the SignalR hub will be consolidated into an array containing all up-to-date connected cursors. Our context will manage this array and the SignalR connection.

Centralized Connection Management

Let’s start by connecting to the SignalR Hub. Since the RealtimeCursorContext will handle the connection, it makes the most sense to manage it inside a custom context provider.

I like to structure React Context into three parts (usually in the same file for readability):

The context itself, which we won’t export to prevent misue.
A custom Context Provider to centralize all logic.
A custom hook for added clarity and custom logic when needed.

A custom context provider is just a React component that wraps its children with the context provider, which is perfect for managing the context state.

Let’s start with the context itself:

1type RealtimeCursorContextType = {
2  connection: HubConnection | null;
3};
4
5const RealtimeCursorContext =
6  React.createContext<RealtimeCursorContextType | null>(null);

Next, we’ll create our custom useContext hook, useRealtimeCursor, which throws an error if used outside a RealtimeCursorContext:

1export function useRealtimeCursor() {
2  const context = React.useContext(RealtimeCursorContext);
3  if (!context) {
4    throw new Error(
5      "useRealtimeCursor must be used within a RealtimeCursorProvider"
6    );
7  }
8  return context;
9}

Finally, we’ll create the custom provider. We’ll use the useEffect hook to connect when the provider mounts and disconnect when it unmounts:

1type RealtimeCursorProviderProps = {
2  children: React.ReactNode;
3};
4
5export function RealtimeCursorProvider({
6  children,
7}: RealtimeCursorProviderProps) {
8  const [connection, setConnection] = React.useState<HubConnection | null>();
9
10  React.useEffect(() => {
11    const newConnection = new HubConnectionBuilder()
12      .withUrl("https://localhost:7081/cursor")
13      .withAutomaticReconnect()
14      .build();
15
16    async function start() {
17      try {
18        await newConnection.start();
19        setConnection(newConnection);
20      } catch (err) {
21        setTimeout(start, 5000);
22      }
23    }
24
25    start();
26    return () => newConnection.stop(); //Close the connection when the provider unmounts
27  }, []);
28
29  return (
30    <RealtimeCursorContext.Provider value={{ connection }}>
31      {children}
32    </RealtimeCursorContext.Provider>
33  );
34}

Next, we’ll wrap our App component with the RealtimeCursorProvider:

1//main.ts
2ReactDOM.createRoot(document.getElementById("root")!).render(
3  <RealtimeCursorProvider>
4    <App />
5  </RealtimeCursorProvider>
6);

Now we can access the connection in any component like this:

1import { useRealtimeCursor } from "./RealtimeCursorContext";
2
3function SomeComponent() {
4const { connection } = useRealtimeCursor();
5  // ...the rest of the component
6}

By using this context, we have a centralized way to manage our SignalR connection, avoiding prop drilling and separating connection logic from UI logic. It’s much better than mixing SignalR logic directly into the root component!

Implementing Cursor Tracking in React

Next, we’ll use a custom hook in RealtimeCursorProvider to track the user’s cursor and broadcast its position. This keeps all our cursor logic in a single component, following the Single Responsibility Principle.

The custom hook, useUpdateCursorLocation, is a simple wrapper around a useEffect hook that registers a mousemove event listener whenever the connection changes:

1export function useUpdateCursorLocation(connection: HubConnection | null) {
2  React.useEffect(() => {
3      const updateCursorPosition = (ev: MouseEvent) => {
4      const x = ev.clientX;
5      const y = ev.clientY;
6      if (connection?.state !== "Connected") {
7        return;
8      }
9      connection?.send("UpdateCursorPosition", x, y);
10    };
11
12    window.addEventListener("mousemove", updateCursorPosition);
13    return () => {
14      window.removeEventListener("mousemove", updateCursorPosition);
15    };
16  }, [connection]);
17}

We can add this hook to our RealtimeCursorProvider to ensure that we’re always tracking and broadcasting the cursor position when required.

Keeping track of the other cursors

For other cursors, the hub we created in the previous article doesn’t provide a list of up-to-date cursors. Instead, it emits events that we can use to construct that list ourselves.

We’ll co-locate this logic inside our context, so our context not only returns the connection but also an updated list of other cursors.

This time, instead of reaching for useState again, we’ll use useReducer. useReducer is specifically meant for complex state logic with action-based updates. Instead of modifying a single useState inside all the different SignalR event listeners, we can create a reduce function that allows us to map each event to a state transition.

First we’ll have to create our reducer. A reducer accepts two parameters: the current state and the action we want to apply to our state. The return value from our reducer will be the newly updated state.

1function cursorReducer(state: OtherCursor[], action: ReducerActionType) {
2  switch (action.type) {
3    case "start":
4      return action.payload;
5    case "add":
6      return [...state, action.payload];
7    case "remove":
8      return state.filter(
9        (cursor) => cursor.connectionId !== action.connectionId
10      );
11    case "update":
12      return state.map((cursor) =>
13        cursor.connectionId === action.connectionId
14          ? { ...cursor, x: action.x, y: action.y }
15          : cursor
16      );
17    default:
18      return state;
19  }
20}

Now, we’ll wire this up to the SignalR events in a custom hook. I like to keep everything granular and follow the Single Responsibility Principle:

1function useCursorData(connection: HubConnection | null) {
2  const [cursorData, dispatch] = React.useReducer(cursorReducer, []);
3
4  React.useEffect(() => {
5    // We don't need to check the connection state
6    // since registering event listeners doesn't require a connected connection
7    if (!connection) {
8      return;
9    }
10    connection.on(
11      "CursorPositionUpdated",
12      (connectionId: string, x: number, y: number) =>
13        dispatch({ type: "update", connectionId, x, y })
14    );
15    connection.on("CursorConnected", (Cursor: OtherCursor) =>
16      dispatch({ type: "add", payload: Cursor })
17    );
18    connection.on("ConnectionEstablished", (mice: OtherCursor[]) =>
19      dispatch({ type: "start", payload: mice })
20    );
21    connection.on("CursorDisconnected", (connectionId: string) => {
22      dispatch({ type: "remove", connectionId });
23    });
24  }, [connection]);
25
26  return cursorData;
27}

This setup provides a clear separation between the events we listen to and the state transitions. The result is code that’s easier to maintain. The last step is to hook it up to our context.

Displaying the other cursors

With state management in place, displaying the other cursors is straightforward.

We only need two components: one for the HTML and CSS to show a cursor, and another to wire up the state and display a cursor for each connected client.

A simple cursor might look like this:

1export function OtherCursor({ color, name, x, y }: OtherCursorProps) {
2  return (
3    <div style={{ background: color, position: "absolute", left: x, top: y }}>
4      <div>{name}</div>
5    </div>
6  );
7}

And we can wire it up like this:

1export function OtherCursors() {
2  const { otherCursors } = useRealtimeCursor();
3  return (
4    <>
5      {otherCursors.map((cursor) => (
6        <OtherCursor
7          key={cursor.connectionId}
8          // We can spread the cursor since the
9          // component props and object properties overlap
10          {...cursor}
11        />
12      ))}
13    </>
14  );
15}

Now you can use <OtherCursors> wherever you want to display the real-time cursors of others on your site! But before you go off to create awesome new websites, check out the next section where we’ll tackle performance and user experience issues!

Conclusion

With SignalR integrated into your React app, you now have a solid foundation for any real-time functionality.

By centralizing connection and state management in a single context, we’ve made our code more maintainable. Any additional features are easily added since we separated the state update logic into clear action-based updates with our reducer.

As your app grows, this setup will allow you to handle real-time data sources efficiently.

In the next article, we’ll introduce mouse event debouncing. Handling updates from hundreds of users 60 times per second isn’t ideal for production, and we’ll also address the user experience impact of debouncing. See you in the next one!