Using React Hooks for Phoenix Socket/Channels

SocketContextWithRef.ts

import React, { createContext, useContext, useRef } from 'react';
import { Socket } from 'phoenix';
import AuthContext from './AuthContext';

const SocketContext = createContext<Socket>({} as Socket);
const SocketConsumer = SocketContext.Consumer;

const SocketProvider: React.FC = ({ children }) => {
  let token = useContext(AuthContext).token!;
  let socketRef = useRef<{
    token?: string;
    socket?: Socket;
  }>({});

  if (socketRef.current.token !== token) {
    socketRef.current.socket?.disconnect();

    console.log('Socket Context :: Connect');

    let socket = new Socket(process.env.REACT_APP_SOCKET_HOST!, { params: { token } });
    socket.connect();

    socketRef.current = {
      token,
      socket,
    };
  }

  if (!socketRef.current.socket) return null;

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

export { SocketProvider, SocketConsumer };
export default SocketContext;

SocketContextWithUseMemo.ts

import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { Socket } from 'phoenix';
import AuthContext from './AuthContext';

const SocketContext = createContext<Socket>({} as Socket);
const SocketConsumer = SocketContext.Consumer;

const SocketProvider: React.FC = ({ children }) => {
  let token = useContext(AuthContext).token!;
  let socket = useMemo<Socket>(
    () => new Socket(process.env.REACT_APP_SOCKET_HOST!, { params: { token } }),
    [token]
  );

  useEffect(() => {
    console.log('Socket Context :: Connect');
    socket.connect();
    return () => socket.disconnect();
  }, [socket]);

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

export { SocketProvider, SocketConsumer };
export default SocketContext;

SocketContextWithUseState.ts

import React, { createContext, useContext, useState, useEffect } from 'react';
import { Socket } from 'phoenix';
import AuthContext from './AuthContext';

const SocketContext = createContext<Socket>({} as Socket);
const SocketConsumer = SocketContext.Consumer;

const SocketProvider: React.FC = ({ children }) => {
  let token = useContext(AuthContext).token!;
  let [socket, setSocket] = useState<Socket | null>(null);

  useEffect(() => {
    let socket = new Socket(process.env.REACT_APP_SOCKET_HOST!, { params: { token } });
    socket.connect();

    setSocket(socket);

    return () => socket.disconnect();
  }, [token]);

  if (!socket) return null;

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

export { SocketProvider, SocketConsumer };
export default SocketContext;