SocketProvider.jsx

import React, { createContext, useContext, useEffect, useState } from 'react';
import io, { Socket } from 'socket.io-client';
import { useSelector, useStore } from 'react-redux';

import SocketEvents from './SocketEvents';

export const SocketContext = createContext();

export const useSocket = () => useContext(SocketContext);

export const SocketProvider = ({ children }) => {
	const [socket, setSocket] = useState();
	
	const serverUrl = 'https://yourUrl.com';

	const conOpts: Partial<ManagerOptions & SocketOptions> = {
		extraHeaders: {
			Authorization: `bearer ${userAccessToken ? userAccessToken : ''}`,
			cors: '*',
		},
		forceNew: true,
		reconnectionDelay: 1000,
		reconnectionDelayMax: 5000,
		reconnectionAttempts: Infinity,
		timeout: 1000,
		transports: ['polling', 'websocket'],
		reconnection: true,
	};

	const store = useStore();

	useEffect(() => {
		let newSocket = io(serverUrl, conOpts);
		setSocket(newSocket);
		
		return () => {
			socket.disconnect();
		}
	}, []);

	return (
		<SocketContext.Provider value={socket}>
			{socket && <SocketEvents socket={socket} />}  // component that has all the event listeners and killers
			{children}
		</SocketContext.Provider>
	);
};