Proper way of using React hooks + WebSockets

When building real-time applications with React hooks and WebSockets, there are several key steps to follow to ensure the performance and maintainability of the application. Below are the recommended methods and steps:

1. Creating WebSocket Connections

Use the useEffect hook in React components to establish WebSocket connections. This ensures the WebSocket is created only during the initial render, preventing duplicate connections caused by component updates.

jsx
const [messages, setMessages] = useState([]);

useEffect(() => {
  const socket = new WebSocket('ws://example.com/socket');

  socket.onmessage = (event) => {
    const newMessage = JSON.parse(event.data);
    setMessages((prevMessages) => [...prevMessages, newMessage]);
  };

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

2. Receiving Messages

Handle data in the WebSocket's onmessage event. Typically, data is transmitted in JSON format, so it must be parsed before use. Store received messages using the useState hook to leverage them within the component for rendering or other logic.

3. Sending Messages

Encapsulate the message-sending logic into a reusable function that can be invoked from various parts of the component, such as event handlers or effect hooks.

jsx
const sendMessage = (socket, message) => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify(message));
  }
};

// Usage
<button onClick={() => sendMessage(socket, { text: 'Hello!' })}>
  Send Message
</button>

4. Cleaning Up Resources

The cleanup function returned by useEffect executes when the component unmounts, making it ideal for closing WebSocket connections. This practice prevents memory leaks and ensures application stability.

Example

Here is a simple chat application example demonstrating how to integrate React hooks with WebSocket:

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

const ChatApp = () => {
  const [socket, setSocket] = useState(null);
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const newSocket = new WebSocket('ws://example.com/chat');

    newSocket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages(prev => [...prev, message]);
    };

    setSocket(newSocket);

    return () => newSocket.close();
  }, []);

  const handleSendMessage = () => {
    if (socket) {
      socket.send(JSON.stringify({ text: 'Hello World!' }));
    }
  };

  return (
    <div>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg.text}</li>
        ))}
      </ul>
      <button onClick={handleSendMessage}>Send Message</button>
    </div>
  );
};

export default ChatApp;

In this example, we implement a simple chat application using WebSocket for message reception and transmission, and React's state hooks for managing message display. This demonstrates how to effectively combine React hooks with WebSocket to build real-time applications.