Side Effects

useEffect patterns, cleanup functions, dependency arrays, and common pitfalls.

Overview

Effects handle side effects like data fetching, subscriptions, and DOM mutations.

Key Concepts

• Dependency Array — Controls when effect runs
• Cleanup Function — Returns function to run on unmount or before next effect
• Empty Array — Runs once on mount
• Missing Dependencies — Common bug causing stale closures
• Strict Mode — Effects run twice in development

Code Examples

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

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('message', msg => setMessages(prev => [...prev, msg]));
    
    return () => {
      connection.disconnect();
    };
  }, [roomId]);

  return (
    <div>
      <h2>Room: {roomId}</h2>
      <ul>
        {messages.map((msg, i) => <li key={i}>{msg}</li>)}
      </ul>
    </div>
  );
}

Practice

Build a real-time chat app with proper connection cleanup and room switching.