How does useEffect work? What are its dependency array behaviors?

useEffect(() => {
  // effect logic
  return () => { /* cleanup */ };
}, [dependencies]);

Three dependency modes:

// 1. No array — runs after EVERY render
useEffect(() => { document.title = 'Re-ran'; });

// 2. Empty array — runs ONCE after mount
useEffect(() => {
  const ws = new WebSocket(url);
  return () => ws.close(); // cleanup on unmount
}, []);

// 3. With deps — runs when any dep changes
useEffect(() => {
  fetchUser(userId); // re-fetches whenever userId changes
}, [userId]);

Cleanup timing:

• Runs before the next effect fires (when deps change)
• Runs on component unmount

useEffect(() => {
  const id = setInterval(() => tick(), 1000);
  return () => clearInterval(id); // cleans up before next effect
}, [tick]);