React SocketProvider

App.jsx

import React, { useState } from 'react';
import { useSocket } from "./constext/SocketProvider";

function App() {

	const socket = useSocket();
	const [data, setData] = useState([]);
	
	useEffect(() => {
		if (socket) {
			socket.on('message', (res) => {
				setData(currentData => [...curentData, res]);
			});
		}
	},[socket]);

	return (
		<>
			<p>{JSON.stringify(data)}</p>
		</>
	);
}

export default App;

index.jsx

import React, { useState } from 'react';
import { SocketProvider } from './contexts/SocketProvider';

ReactDOM.render(
	<SocketProvider socket={socket} setSocket={setSocket}>
		<App />
	</SocketProvider>,
	document.getElementById('root'),
);

SocketProvider.js

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

const SocketContext = React.createContext();

const location = 'loalhost:3000';

const [socket, setSocket] = useState();

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

export function SocketProvider({ children }) {

	let conOpts = {
		extraHeaders: {
			cors: {
				origin: '*',
				methods: 'GET,PUT,POST,DELETE,OPTIONS'.split(','),
				credentials: true
			},
		},
		cors_allowed_origins: '*',
		reconnect: true,
		reconnectDelay: 1000,
		reconnectDelayMax: 5000,
		reconnectAttempts: Infinity,
		timeout: 1000,
		transports: [
			'polling',
			'websocket'
		],
		'reconnection limit': 3000,
		'max reconnection attempts': Number.MAX_VALUE,
		'connect timeout': 7000,
		'force new connection': true
	};
  
	useEffect(() => {
		let newSocket;
		let timeout;

		if (location) {
				newSocket = io(location, conOpts);
				setSocket(newSocket);
		}

		return () => {
			newSocket?.close();
		};
	}, [location]);

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

}