What is useEffect actually for?

An effect runs after React commits the DOM update. Its job is to keep something outside React in sync with the current props and state. If the value can be computed during render, compute it during render. If the work happens because the user clicked something, do it in the event handler, not in an effect.

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = createSocket(roomId);

    const handleMessage = (message) => {
      setMessages((current) => [...current, message]);
    };

    socket.on("message", handleMessage);

    return () => {
      socket.off("message", handleMessage);
      socket.disconnect();
    };
  }, [roomId]);

  return <MessageList messages={messages} />;
}

Good reasons to use an effect

• Subscribing to browser events, sockets or stores
• Using a browser API that is not available during server rendering
• Integrating a non-React widget such as a map or video player
• Starting and cancelling work that depends on the committed UI

Data fetching is a common effect use, but it is usually better handled by a router loader, a framework or a data library. Those tools solve race conditions, caching and cancellation that a hand-written effect often gets wrong.