Side Effects and useEffect Hook

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  // Effect runs after every render
  useEffect(() => {
    document.title = `Count: ${count}`;
  });
  
  // Effect runs only once (after mount)
  useEffect(() => {
    console.log('Component mounted');
  }, []); // Empty dependency array
  
  // Effect runs when count changes
  useEffect(() => {
    console.log('Count changed to:', count);
  }, [count]); // List dependencies
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

The dependency array controls when the effect runs. No array = every render. Empty array [] = once after mount. Array with values = when those values change.

// Pattern 1: Run after every render (rarely needed)
useEffect(() => {
  console.log('Rendered');
  // This runs after EVERY render
  // Usually not what you want - can cause performance issues
});

// Pattern 2: Run once on mount (common for setup)
useEffect(() => {
  // Fetch initial data
  fetchUserData();
  
  // Set up subscriptions
  const subscription = subscribeToUpdates();
  
  // Update document title once
  document.title = 'My App';
  
  // Cleanup on unmount
  return () => {
    subscription.unsubscribe();
  };
}, []); // Empty array = run once

// Pattern 3: Run when dependencies change (most common)
useEffect(() => {
  // Fetch data when userId changes
  fetchUserPosts(userId);
  
  // Update title when count changes
  document.title = `Count: ${count}`;
}, [userId, count]); // List all dependencies

Most effects fall into pattern 2 or 3. Pattern 1 (no dependencies) is rarely needed and can cause infinite loops or performance issues if not careful.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [showDetails, setShowDetails] = useState(false);
  
  // ❌ MISSING DEPENDENCY - userId not in array
  useEffect(() => {
    fetchUser(userId);  // Uses userId but not in deps
  }, []); // Missing userId!
  
  // ✅ CORRECT - includes userId
  useEffect(() => {
    fetchUser(userId);
  }, [userId]); // userId is a dependency
  
  // ❌ MISSING DEPENDENCY - function in effect
  const formatUser = (user) => {
    return user.name.toUpperCase();
  };
  
  useEffect(() => {
    const formatted = formatUser(user);  // Uses formatUser
  }, [user]); // Missing formatUser!
  
  // ✅ CORRECT - move function inside effect
  useEffect(() => {
    const formatUser = (user) => user.name.toUpperCase();
    const formatted = formatUser(user);
  }, [user]);
  
  // ✅ OR wrap in useCallback
  const formatUser = useCallback((user) => {
    return user.name.toUpperCase();
  }, []);
  
  useEffect(() => {
    const formatted = formatUser(user);
  }, [user, formatUser]);
  
  // Dependency on props/state
  useEffect(() => {
    if (showDetails) {
      loadUserDetails(userId);
    }
  }, [userId, showDetails]); // Both are used

Always include all values from component scope that the effect uses. Missing dependencies cause stale closures where the effect uses old values. The ESLint rule 'react-hooks/exhaustive-deps' helps catch these issues.

// Timer cleanup
useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
  
  // Cleanup function
  return () => {
    clearInterval(timer);
  };
}, []);

// Event listener cleanup
useEffect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };
  
  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

// Subscription cleanup
useEffect(() => {
  const subscription = dataStream.subscribe(data => {
    setData(data);
  });
  
  return () => {
    subscription.unsubscribe();
  };
}, []);

// Cleanup with dependencies - runs before re-running effect
useEffect(() => {
  const controller = new AbortController();
  
  fetch(`/api/users/${userId}`, {
    signal: controller.signal
  })
    .then(res => res.json())
    .then(setUser);
  
  // Cleanup cancels request if userId changes or component unmounts
  return () => {
    controller.abort();
  };
}, [userId]);

Cleanup functions prevent memory leaks. They run before unmount AND before the effect runs again (if dependencies changed). Always clean up timers, subscriptions, and event listeners.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Reset states when userId changes
    setLoading(true);
    setError(null);
    setUser(null);
    
    // AbortController for cleanup
    const controller = new AbortController();
    
    async function fetchUser() {
      try {
        const response = await fetch(
          `/api/users/${userId}`,
          { signal: controller.signal }
        );
        
        if (!response.ok) {
          throw new Error('Failed to fetch user');
        }
        
        const userData = await response.json();
        setUser(userData);
      } catch (err) {
        // Don't set error if request was aborted
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }
    
    fetchUser();
    
    // Cleanup: abort request if userId changes or component unmounts
    return () => {
      controller.abort();
    };
  }, [userId]);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return null;
  
  return <div>{user.name}</div>;
}

Always handle loading and error states. Use AbortController to cancel requests when dependencies change or component unmounts. Reset states when fetching new data.

// ❌ MISTAKE 1: Infinite loop - missing dependency
function BadCounter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1);  // Infinite loop!
  }); // Missing dependency array
  
  return <div>{count}</div>;
}

// ✅ CORRECT - Use dependency array or functional update
useEffect(() => {
  // Only run once on mount
  setCount(prev => prev + 1);
}, []);

// ❌ MISTAKE 2: Stale closure - object/array dependency
function BadEffect() {
  const [items, setItems] = useState([]);
  const filter = { category: 'electronics' };
  
  useEffect(() => {
    fetchItems(filter);  // filter is a new object each render
  }, [filter]); // filter changes every render!
}

// ✅ CORRECT - Use primitive values or memoize
useEffect(() => {
  const filter = { category: 'electronics' };
  fetchItems(filter);
}, []); // Or extract to state/useMemo

// ❌ MISTAKE 3: Not cleaning up
function BadTimer() {
  useEffect(() => {
    setInterval(() => {
      console.log('Tick');
    }, 1000);
    // Missing cleanup - memory leak!
  }, []);
}

// ✅ CORRECT - Always clean up
useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
  
  return () => clearInterval(timer);
}, []);

// ❌ MISTAKE 4: Effect that should be event handler
function BadForm() {
  const [email, setEmail] = useState('');
  
  useEffect(() => {
    validateEmail(email);  // Should be in onChange
  }, [email]);
}

// ✅ CORRECT - Use event handler
function GoodForm() {
  const [email, setEmail] = useState('');
  
  const handleChange = (e) => {
    setEmail(e.target.value);
    validateEmail(e.target.value);  // Directly in handler
  };
}

Common mistakes include infinite loops from missing dependencies, stale closures from object dependencies, not cleaning up resources, and using effects when event handlers are more appropriate.

// ❌ BAD - Transforming data in effect
function UserList({ users }) {
  const [filteredUsers, setFilteredUsers] = useState([]);
  
  useEffect(() => {
    setFilteredUsers(users.filter(u => u.active));
  }, [users]); // Unnecessary effect
  
  return <div>{/* render */}</div>;
}

// ✅ GOOD - Transform during render
function UserList({ users }) {
  const filteredUsers = users.filter(u => u.active);
  return <div>{/* render */}</div>;
}

// ❌ BAD - Event handling in effect
function SearchBox() {
  const [query, setQuery] = useState('');
  
  useEffect(() => {
    if (query) {
      search(query);
    }
  }, [query]); // Should be in onChange
  
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// ✅ GOOD - Handle in event handler
function SearchBox() {
  const [query, setQuery] = useState('');
  
  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    if (value) {
      search(value);  // Directly in handler
    }
  };
  
  return <input value={query} onChange={handleChange} />;
}

// ❌ BAD - Resetting state when prop changes
function UserProfile({ userId }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    setData(null);  // Reset when userId changes
  }, [userId]);
}

// ✅ GOOD - Use key prop to reset component
<UserProfile key={userId} userId={userId} />

Many things that seem to need useEffect can be handled more simply. Transform data during render, handle events in event handlers, and use keys to reset components. Only use useEffect for true side effects.