React Fundamentals

Chapter 11: Component Lifecycle

11.1 Lifecycle Methods

Class components have lifecycle methods that run at specific points. Function components use hooks for similar functionality.

Lifecycle Phases:

• Mounting: Component is created and inserted into DOM
• Updating: Component re-renders due to state/props changes
• Unmounting: Component is removed from DOM

Class Component Lifecycle:

class MyComponent extends React.Component {
    componentDidMount() {
        // Runs after component mounts
        // Good for API calls, subscriptions
    }
    
    componentDidUpdate(prevProps, prevState) {
        // Runs after update
        // Compare prevProps/prevState with current
    }
    
    componentWillUnmount() {
        // Runs before unmounting
        // Cleanup: remove listeners, cancel requests
    }
}

11.2 useEffect Hook (Function Components)

useEffect replaces lifecycle methods in function components.

import { useEffect } from 'react';

function MyComponent() {
    useEffect(() => {
        // Runs after render (like componentDidMount + componentDidUpdate)
        console.log('Component rendered');
        
        // Cleanup function (like componentWillUnmount)
        return () => {
            console.log('Cleanup');
        };
    });
}

useEffect Dependencies:

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

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

// Run on every render (usually avoid)
useEffect(() => {
    // Code
}); // No dependency array

11.3 Common Lifecycle Patterns

Common patterns for lifecycle operations.

// Fetch data on mount
useEffect(() => {
    fetchData().then(setData);
}, []);

// Update when prop changes
useEffect(() => {
    updateData(props.id);
}, [props.id]);

// Cleanup subscriptions
useEffect(() => {
    const subscription = subscribe();
    return () => subscription.unsubscribe();
}, []);

11.4 Lifecycle Best Practices

Follow best practices for lifecycle management.

• Use useEffect for side effects
• Clean up subscriptions and timers
• Specify correct dependencies
• Avoid infinite loops
• Use multiple useEffect hooks for different concerns