socket.io-react-hooks-advanced/src/hooks/useEvent.ts

A modular and extensible React + Socket.IO hook library designed for real-world applications. Supports namespaced sockets, reconnection strategies, offline queues, latency monitoring, middleware, encryption, and more.

import {useEffect, useRef} from "react";
import {useSocketContext} from "../context/SocketContext";

type Handler = (...args: any[]) => void;

export const useEvent = (
    event: string,
    handler: Handler,
    deps: any[] = []
) => {
    const {socket, connected} = useSocketContext(); // include connected status
    const savedHandler = useRef<Handler>();

    useEffect(() => {
        savedHandler.current = handler;
    }, [handler]);

    useEffect(() => {
        if (!socket || !connected) return;

        const listener: Handler = (...args) => {
            savedHandler.current?.(...args);
        };

        socket.on(event, listener);
        return () => {
            socket.off(event, listener);
        };
    }, [socket, event, connected, ...deps]); // add `connected` to dependencies
};