How can I use WebSocket with React hooks?

How can I use WebSocket with React hooks?

You can use the useEffect and useState hooks to manage WebSocket connections in React.

Can you provide a code example?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';

const useWebSocket = (url) => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const socket = new WebSocket(url);

        socket.onmessage = (event) => {
            setData(event.data);
        };

        socket.onerror = (event) => {
            setError(event);
        };

        return () => {
            socket.close();
        };
    }, [url]);

    return { data, error };
};

const MyComponent = () => {
    const { data, error } = useWebSocket('ws://example.com/socket');

    return <div>{data ? data : error ? 'Error!' : 'Connecting...'}</div>;
};

This hook connects to a WebSocket and updates the component with incoming messages.

What if I want to send messages through the WebSocket?

You can add a function to send messages. Here's an updated version of the hook:

const useWebSocket = (url) => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [socket, setSocket] = useState(null);

    useEffect(() => {
        const ws = new WebSocket(url);
        setSocket(ws);

        ws.onmessage = (event) => {
            setData(event.data);
        };

        ws.onerror = (event) => {
            setError(event);
        };

        return () => {
            ws.close();
        };
    }, [url]);

    const sendMessage = (message) => {
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.send(message);
        }
    };

    return { data, error, sendMessage };
};

Now you can call sendMessage to send data through the WebSocket.