When building React applications with real-time features, you often need to use a single socket instance in many different components. Creating a new socket connection in each component is inefficient and can cause unexpected issues, such as multiple connections to the server or duplicated event listeners. To solve this, you can use React Context to create a SocketContext and a provider component that makes the socket instance available to any component in your app, no matter how deeply it is nested.

To set this up, first create a new context using React.createContext(). Then, build a provider component that initializes the socket connection and passes it down through the context. Any child component can then access the socket by using the useContext hook.

Here is how you might implement this pattern:

import React, { createContext, useContext, useEffect, useState } from "react";
import { io } from "socket.io-client";

const SocketContext = createContext(null);

export function SocketProvider({ children }) {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const socketInstance = io("http://localhost:3000");
    setSocket(socketInstance);

    return () => {
      socketInstance.disconnect();
    };
  }, []);

  return (
    <SocketContext.Provider value={socket}>
      {children}
    </SocketContext.Provider>
  );
}

export function useSocket() {
  return useContext(SocketContext);
}

With this setup, you wrap your application's root component (or any subtree that needs socket access) with the SocketProvider. Now, any nested component can easily access the shared socket instance.

Centralizing socket management with React Context offers several benefits:

• Ensures a single, shared socket connection for the entire app;
• Avoids duplicate connections and event listeners;
• Simplifies cleanup and resource management;
• Makes socket access easy for any component, no matter how deeply nested.

For example, you can use the useSocket hook in different components to send or receive real-time data without rewriting connection logic:

import React, { useEffect } from "react";
import { useSocket } from "./SocketProvider";

function ChatMessages() {
  const socket = useSocket();

  useEffect(() => {
    if (!socket) return;
    socket.on("message", (msg) => {
      // Handle incoming message
    });
    return () => {
      socket.off("message");
    };
  }, [socket]);

  return <div>Chat area</div>;
}

function SendMessage() {
  const socket = useSocket();

  function send(msg) {
    if (socket) socket.emit("message", msg);
  }

  return <button onClick={() => send("Hello!")}>Send Hello</button>;
}

With this pattern, both ChatMessages and SendMessage can access the same socket instance provided by the context, making the codebase cleaner and easier to maintain.