reactuals/dist/hooks/useWebSocket.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useEffect, useRef, useState } from "react";
export function useWebSocket(url) {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const socketRef = useRef(null);
    useEffect(() => {
        const socket = new WebSocket(url);
        socketRef.current = socket;
        socket.onmessage = (event) => setData(event.data);
        socket.onerror = (event) => setError(event);
        return () => socket.close();
    }, [url]);
    const sendMessage = (msg) => {
        if (socketRef.current?.readyState === WebSocket.OPEN) {
            socketRef.current.send(msg);
        }
    };
    return { data, error, sendMessage };
}