socket.io-react-hooks-advanced/dist/hooks/useEvent.js

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";
export const useEvent = (event, handler, deps = []) => {
    const { socket, connected } = useSocketContext(); // include connected status
    const savedHandler = useRef();
    useEffect(() => {
        savedHandler.current = handler;
    }, [handler]);
    useEffect(() => {
        if (!socket || !connected)
            return;
        const listener = (...args) => {
            var _a;
            (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, ...args);
        };
        socket.on(event, listener);
        return () => {
            socket.off(event, listener);
        };
    }, [socket, event, connected, ...deps]); // add `connected` to dependencies
};