useSockets.js

// useSockets.js

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

export default function useSocket() {

    const [Socket, setSocket] = useState(null);
    const [notification, setNotification] = useState('');
    const [broadcast, setBroadcast] = useState('');

    const Connect = (token) => {
        let socket = io.connect('wss://localhost:5001');
        socket.emit('authenticate', {
            token: token
        }).on('authenticated', (res) => {
            window.socket = socket;
            setSocket(socket);
        }).on('notification', (data) => {
            setNotification(data);
        }).on('user_disconnected', (data) => {
            setSocket(null);
        }).on('broadcast', (data) => {
            setBroadcast(data);
        });

    }

    const Disconnect = (socket) => {
        socket.disconnect()
    }

    return {
        Socket,
        Connect,
        Disconnect,
        notification,
        broadcast
    };

}

// Usage

const { Socket, Connect, Disconnect, notification, broadcast } = useSocket();

useEffect(() => {

    Connect(TOKEN);

},[]);

useEffect(() => {

    if(Socket) { // We are connected! }

}, [Socket]);

useEffect(() => {

    // Handle notifications events

}, [notification]);

useEffect(() => {

    // Handle broadcast events

}, [broadcast]);