Web Development

React Component Lifecycle

Understanding component lifecycle methods

Lifecycle with Hooks

useEffect(() => { # componentDidMount
    // runs after first render
}, []);
useEffect(() => { # componentDidUpdate
    // runs on every render
});

Cleanup

useEffect(() => {
    // setup
    return () => { # componentWillUnmount
        // cleanup
    };
}, []);

Class Lifecycle Methods

componentDidMount() { # after first render
    // setup
}
componentDidUpdate(prevProps, prevState) { # after updates
    // respond to changes
}
componentWillUnmount() { # before unmount
    // cleanup
}

Error Boundaries

componentDidCatch(error, info) { # catch errors
    this.setState({ hasError: true });
}
static getDerivedStateFromError(error) { # update state
    return { hasError: true };
}