Using Socket.io in React

Using socket.io-client in React, isn't that straightforward. This post, will show you how to use socket.io-client in React the right way, without any issues.

Table of contents

1. Prerequisites
   1. Socket.io server
   2. Installing socket.io-client
2. What we will be using
3. SocketContext
4. useSocket hook
5. SocketProvider component
6. Wrapping the app with the provider
   1. (Optional) Adding a loading screen
7. Usage of the hook
8. Honorable mention
9. That's it!

Prerequisites

Socket.io server

This guide assumes you have a socket.io server already setup and running. If you don't have one, check out the socket.io documentation.

Installing socket.io-client

If you don't have socket.io-client installed yet, run the following command:

npm install socket.io-client

What we will be using

React Context is the key element, which allows us to pass information from a parent component to any component in the tree blow it, no matter how deep. Passing Data Deeply with Context

SocketContext

Let's start by creating a SocketContext variable.

import { createContext } from "react";
import { Socket } from "socket.io-client";
 
type SocketContextType = {
  socket: Socket | null;
  isConnected: boolean;
  isLoading: boolean;
};
 
export const

This component won't just return the socket, it will also return booleans to indicate whether the socket is connected and whether the socket is loading i.e. whether it's still trying to connect to the server.

useSocket hook

The next step is to create a custom hook that will be used to access the socket context.

import { SocketContext } from "path/to/socket-context";
import { useContext } from "react";
 
export function useSocket() {
  const context = useContext(SocketContext);
 
  if (context === undefined) {
    throw new Error("useSocket must be used within a SocketProvider.");

SocketProvider component

Now, let's create a SocketProvider component. This component will wrap our app and provide the socket context to all the components below it. Make sure to read through the comments to understand what's going on.

import { SocketContext } from "path/to/socket-context";
import { useEffect, useState } from

Wrapping the app with the provider

Finally, let's wrap the components for which we want to access the socket context with the provider.

import { SocketProvider } from "path/to/socket-provider";
 
export function App({ children }: { children: React.ReactNode }) {
  return <SocketProvider>{children}</SocketProvider>;
}

The way which you need to wrap your app may be a bit different depending on the framework you're using.

(Optional) Adding a loading screen

Connections to the server can take a while, so it's a good idea to add a loading screen. Keep in mind that this may not be the best way to do this as it will block the user from interacting with the app until the connection is established.

import { SocketProvider } from "path/to/socket-provider";
import { useSocket } from "path/to/use-socket";
 
function SocketLoader({ children }: { children: React.ReactNode }) {
  const { isLoading } = useSocket();

Usage of the hook

import { useSocket } from "path/to/use-socket";
 
// This component should be used inside of a SocketProvider
export function ChildComponent() {
  const { socket } = useSocket();
 
  return <p>Connected as {socket?.id}</>;
}

This example will simply return the connected socket ID. But at this point you can basically do whatever you want with the socket.

Honorable mention

If you intend to use regular WebSockets instead of Socket.io, you can use the react-use-websocket library, it also supports Socket.io out of the box and has several useful features.

That's it!

You've now set up a proper way to use Socket.io in React. I hope this guide has been helpful.