React Fundamentals

Chapter 14: useEffect Hook

14.1 Basic useEffect

useEffect handles side effects in function components. It runs after render.

import { useEffect } from 'react';

function Component() {
    useEffect(() => {
        // Side effect code
        console.log('Component rendered');
    });
    
    return <div>Content</div>;
}

useEffect Syntax:

• First argument: function with side effect
• Second argument: dependency array (optional)
• Runs after every render by default

Dependency Array:

// Run on every render
useEffect(() => {
    // Code
});

// Run once on mount
useEffect(() => {
    // Code
}, []);

// Run when dependency changes
useEffect(() => {
    // Code
}, [dependency]);

14.2 Cleanup

Return cleanup function from useEffect to clean up side effects.

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

Common Cleanup Scenarios:

• Clear timers/intervals
• Cancel API requests
• Remove event listeners
• Close subscriptions

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

14.3 useEffect Patterns

Common patterns for using useEffect.

// Fetch data on mount
useEffect(() => {
    fetch('/api/data')
        .then(res => res.json())
        .then(data => setData(data));
}, []);

// Update when prop changes
useEffect(() => {
    fetchUserData(userId);
}, [userId]);

// Multiple effects
useEffect(() => {
    // Effect 1
}, [dependency1]);

useEffect(() => {
    // Effect 2
}, [dependency2]);

14.4 useEffect Best Practices

Follow best practices for useEffect.

• Always include dependencies
• Clean up side effects
• Use multiple effects for different concerns
• Avoid infinite loops
• Don't forget dependency array