React: What is useEffect cleanup and why is it important?

1import { useEffect, useState } from "react";
2
3function ChatRoom({ roomId }) {
4  const [messages, setMessages] = useState([]);
5
6  useEffect(() => {
7    const connection = createConnection(roomId);
8    connection.on("message", (msg) => {
9      setMessages(prev => [...prev, msg]);
10    });
11
12    // Cleanup function
13    return () => {
14      connection.disconnect();
15    };
16  }, [roomId]);
17
18  return (
19    <ul>
20      {messages.map((msg, i) => <li key={i}>{msg}</li>)}
21    </ul>
22  );
23}

1useEffect(() => {
2  const handler = () => console.log("resize");
3  window.addEventListener("resize", handler);
4  return () => window.removeEventListener("resize", handler);
5}, []);

1useEffect(() => {
2  const interval = setInterval(() => {
3    setCount(c => c + 1);
4  }, 1000);
5  return () => clearInterval(interval);
6}, []);

1useEffect(() => {
2  const subscription = store.subscribe(handleChange);
3  return () => subscription.unsubscribe();
4}, []);