DEV Community

Itay Schechner
Itay Schechner

Posted on

Using WebSockets with React.js, the right way (no library needed)


In this post I introduce useful custom React.js hooks that take websocket clients to the next level.


In the project I'm currently working on, I have a React.js frontend and a WebSocket server that need to be connected. I spent weeks trying to figure out the best way to use websockets, and I wanted the share the things I learned here.

The code solutions I introduce:

  1. Why using the useReducer() hook when working with WebSockets?
  2. My custom useSession() hook
  3. My usage of the useCallback() hook.
  4. Auto-reconnect features with the custom useDisconnectionHandler() hook. Bonus: Auto-reconnect on page refresh when needed.

The useReducer hook

When I first tried to implement my state management system and update it properly when a message was received, it was a disaster.

My GameContextProvider component, responsible for handling such events, looked like this:

// GameContextProvider.js

const GameContextProvider = ({ children }) => {
  const [isStarted, setStarted] = useState(false);
  const [isConnected, setConnected] = useState(false);
  const [isJudge, setIsJudge] = useState(false);
  const [judge, setJudge] = useState('');
  const [question, setQuestion] = useState('');
  const [deck, setDeck] = useState([]);
  const [showEndScreen, setEndScreenShown] = useState(false);
  const [scoreboard, setScoreboard] = useState([]);
  // Much more state!

Enter fullscreen mode Exit fullscreen mode

Then, when I wanted to handle websocket messages, the handler looked like this:

// GameContextProvider.js

const onMessage = (ev) => {
  const data = JSON.parse(; 
  if (data.question) { // a round is started
   ...... // super long, unreadable message handler
Enter fullscreen mode Exit fullscreen mode

The Solution

I attached a 'context' string to each of my messages in the server, and used this string to dispatch an action in the useReducer hook.
For example, I had a 'JOINED' context, 'GAME_STARTED', 'ROUND_STARTED', 'GAME_ENDED', etc...

then, my GameContextProvider looked like this:

// GameContextProvider.js
const [state, dispatch] = useReducer(reducer, initialState);

const onMessage = (ev) => {
  const data = JSON.parse(; 
  if (data.context) 
    dispatch({ type: data.context, payload: data })
Enter fullscreen mode Exit fullscreen mode

Simple and clean!

In addition, this follows the single responsibility rule. Now the component's responsibility was to wire the state and the websocket technology for the rest of the application to use.

The useSession hook

Before I splitted the WebSocket utilities to a custom hook, my context provider had a messy, unreadable code that took care of the websocket events.

// GameContextProvider.js
const [ws, setWebsocket] = useState(null)
const join = (gameCode, name) => {
  const URL = `${process.env.REACT_APP_WS_URL}?code=${gameCode}&name=${name}`
  setWebsocket(() => {
    const ws = new WebSocket(URL);
    ws.onmessage = onMessage;
    ws.onclose = () => {
      dispatch({ type: 'DISCONNECTED' })
    return ws;
Enter fullscreen mode Exit fullscreen mode

On the surface, this approach looks OK.
but what if I wanted to check the game state on disconnection? If I was to register the function as is, when the value of the state updates, the function would not update!

The Solution

I created a custom hook that handled the websocket utilities. (Note - by that time I refactored my project to TypeScript)

// websocketUtils.ts

export const useSession = (
  onOpen: OpenHandler, 
  onMessage: MessageHandler, 
  onClose: CloseHandler
): SessionHook => {
  const [session, setSession] = useState(null as unkown as Websocket);
  const updateOpenHandler = () => {
    if (!session) return;
    session.addEventListener('open', onOpen);
    return () => {
      session.removeEventListener('open', onOpen);

  const updateMessageHandler = () => {
    if (!session) return;
    session.addEventListener('message', onMessage);
    return () => {
      session.removeEventListener('message', onMessage);

  const updateCloseHandler = () => {
    if (!session) return;
    session.addEventListener('close', onClose);
    return () => {
      session.removeEventListener('close', onClose);

  useEffect(updateOpenHandler, [session, onOpen]);
  useEffect(updateMessageHandler, [session, onMessage]);
  useEffect(updateCloseHandler, [session, onClose]);

   .... // connect, sendMessage utils

Enter fullscreen mode Exit fullscreen mode

This was great! But for some reason, the website's performance was decreased dramatically.

The useCallback hook

To be honest, I had no idea how this hook worked until last week, when I finally figured out the solution.
As it turns out, my open, message, and close handlers were updated on every re-render of the app (!), meaning a few times per second.

When I debugged the application, I tried to test out the affect of the useCallback hook at my performance. as it turned out, the callback hook was only updating the function when one of its dependencies changed, meaning once in minutes!

This improved the performance of my application dramatically.

// GameContextProvider.tsx
const disconnectHandler = useCallback(() => {
  if (state.gameStatus !== GameLifecycle.STOPPED) // unexpected disconnection!
    console.log('unexpected disconnection')
}, [state.gameStatus])
Enter fullscreen mode Exit fullscreen mode

My Custom disconnection handler hook

In the current version of my project, I wanted to develop a feature - on unexpected disconnection, try to reconnect!

I made the changes to my API and was ready to implement them in my React.js client.

As it turned out, this is possible:

// eventHandlers.ts
export const useConnectionPauseHandler(
  state: IGameData,
  dispatch: React.Dispatch<any>
) => {
  const [connectFn, setConnectFn] = useState<ConnectFN>(
    null as unknown as ConnectFN

  const disconnectCallback = useCallback(() => {
    if (state.connectionStatus !== ConnectionLifecycle.RESUMED)
      dispatch({ type: 'DISCONNECTED' });
  }, [dispatch, state.connectionStatus]);

  const pauseCallback = useCallback(() => {
    if (...) {
      // disconnection is expected, or an error is prevting the connection from reconnecting
      console.log('expected disconnection');
      dispatch({ type: 'DISCONNECTED' });
    } else if (...) {
      // connection is unexpected, and not attempting reconnection
      console.log('unexpected disconnection');
      if (connectFn) connectFn(state.gameCode!, null, state.playerId);
      setTimeout(disconnectCallback, 30 * 1000);
  }, [

  const registerConnectFunction = useCallback((fn: ConnectFN) => {
    setConnectFn(() => fn); // do this to avoid confusing the react dispatch function
  }, []);

  return [registerConnectFunction, pauseCallback];

// GameContextProvider.tsx
  const [setConnectFn, onClose] = useConnectionPauseHandler(state, dispatch);
  const [connect, sendMessage] = useSession(

  useEffect(() => {
    console.log('wiring everything...');
  }, [setConnectFn, connect]);

Enter fullscreen mode Exit fullscreen mode

The feature worked like magic.


This is a component that saved the connection credentials if the page is refreshed. Can you figure out a way to refactor it to hooks?

export default class LocalStorageConnectionRestorer extends Component<Wrapper> {
  static contextType = GameContext;
  state = { isReady: false };
  saveValuesBeforeUnload = () => {
    const { connectionStatus, showEndScreen, gameCode, playerId, close } =
    if (connectionStatus === ConnectionLifecycle.RESUMED && !showEndScreen) {
      // going away before game is over
      console.log('saving reconnection before unmount', gameCode, playerId);
      LocalStorageUtils.setValues(gameCode!, playerId!);
  componentDidMount() {
    const [gameCode, playerId] = LocalStorageUtils.getValues();
    if (gameCode && playerId) {
      console.log('attempting reconnection after render');
      this.context.reconnect(gameCode, playerId);
    this.setState({ isReady: true });
    window.addEventListener('beforeunload', this.saveValuesBeforeUnload);
  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.saveValuesBeforeUnload);
  render() {
    return this.state.isReady ? (
    ) : (
      <div className="flex items-center justify-center">Loading...</div>
Enter fullscreen mode Exit fullscreen mode

View The Full Source Code

GitHub logo itays123 / partydeck

A cool online card game!

Top comments (15)

jacqueswho profile image
Jacques Nel

So I tried the same approach, but with phoenix sockets. It was messy and hard to implement. Instead I created a middleware for the reducer. It works

itays123 profile image
Itay Schechner

Looks awesome! I starred your repo. This aproach looks great, tho I personally prefer context/hooks over Redux.

frulow profile image

Hi, I am learning with NodeJs and ReactJS. Please point me in the right direction.
Suppose, I want users to connect to a server (Express.JS) using - securely. I am using auth token - JWT for that. How does it work.
I mean, do I need to send JWT with every event or just once during Join. And even when during join - i verify that the user is authenticated and JWT is legit. How do I know the second time that the user is the one who authenticated and not someone else in place of him. I am a bit confused as you must be getting from my questions.

My real intention is to get realtime data using NodeJS server from MongoDB using and reactjs in the frontend. The data should be private to each user. I think I would need to create separate room for each user.

Just like Facebook friend request system. If you put a request for someone else, it is in realtime updated to the end user.

Just point me in the right direction, blogs, stackoverflow, guides etc. Anything works.

Thanks already to everyone!

itays123 profile image
Itay Schechner

I suggest this solution:

  • attach the token to the Websocket URL in the query params. I.e: ws://localhost:4000/ws?token=...
  • In the server, in the connection established event, get the sessions URL (I supposed you have access to it although I can't recall), and get the search params from it.
  • validate the token, and if not validated - manually disconnect the websocket from the server.
llermaly profile image

Hey, I guess you are not using because you can't implement it on the server ? Or you prefer e sockets over and why?

bfunc profile image
Pavel Litkin • Edited has issues with order of messages and generally it is heavy and messy library. You do not need any library for websockets in browsers nowadays, and you have very well test library ws for node.js

itays123 profile image
Itay Schechner

I used a Java server, so socketIO was not an option.

zyabxwcd profile image

Your structuring and code looks good but still somehow I find it messy and hard to read without spending time to break it down. Passing down context and utilising useReducer was neat.

itays123 profile image
Itay Schechner

Thank you for your feedback. Do you have any useful tips? Perhaps I should practice more code splitting?

zyabxwcd profile image

Maybe I am not sure. I would highly encourage you to go through Airbnb's style guide. They have documented some really good practices. I read some of it a long time ago. Majorly I guess there should be good indentation that separates code logically or functionally. I personally like to club declarations, conditions and returns. Separation of concerns is also an under practised guideline although its very famous. Moreover I came across this article coincidentally the other day,
I think this will help you :)

dtobias profile image
Dom • Edited

I made a hook inspired by GraphQL in the format const { data, loading, error } = useSubscription(url) and it also shares the same websocket if it's already open and retries (exponential back off) if the connection closes abnormally.

dbehmoaras profile image

So glad I found this. Very insightful. Needed a really good resource for websockets without Socket.IO, and this post is at the top of the list.

lico profile image
SeongKuk Han

I learned a lot from your source code.
It makes me realized my react code was not react code.
Thank you, good day

pierre profile image
Pierre-Henry Soria ✨

Great article! Thanks for sharing this with us! πŸš€

aydafield22 profile image

hi, How can to prevent component re-render every on onmessage?