React Lifecycle Methods

Key Concepts

• componentDidMount
• componentDidUpdate
• componentWillUnmount
• shouldComponentUpdate
• getDerivedStateFromProps
• getSnapshotBeforeUpdate
• static getDerivedStateFromError
• componentDidCatch

componentDidMount

This method is called immediately after a component is mounted (inserted into the tree). It is a good place to perform side effects such as data fetching, subscriptions, or DOM manipulation.

Example:

        class ExampleComponent extends React.Component {
            componentDidMount() {
                console.log('Component has been mounted!');
                this.fetchData();
            }

            fetchData = () => {
                // Fetch data from an API
            }

            render() {
                return <div>Hello, World!</div>;
            }
        }
    

componentDidUpdate

This method is invoked immediately after updating occurs. It is useful for performing side effects after the component's state or props have changed.

Example:

        class ExampleComponent extends React.Component {
            componentDidUpdate(prevProps, prevState) {
                if (this.props.userID !== prevProps.userID) {
                    this.fetchData();
                }
            }

            fetchData = () => {
                // Fetch data based on new props
            }

            render() {
                return <div>Hello, World!</div>;
            }
        }
    

componentWillUnmount

This method is called immediately before a component is unmounted and destroyed. It is used for cleanup, such as canceling network requests, removing event listeners, or invalidating timers.

Example:

        class ExampleComponent extends React.Component {
            componentWillUnmount() {
                console.log('Component is about to be unmounted!');
                this.clearInterval();
            }

            clearInterval = () => {
                // Clear any intervals or timers
            }

            render() {
                return <div>Hello, World!</div>;
            }
        }
    

shouldComponentUpdate

This method allows you to control whether the component should re-render or not. It is useful for performance optimization by preventing unnecessary re-renders.

Example:

        class ExampleComponent extends React.Component {
            shouldComponentUpdate(nextProps, nextState) {
                return nextProps.userID !== this.props.userID;
            }

            render() {
                return <div>Hello, World!</div>;
            }
        }
    

getDerivedStateFromProps

This static method is called right before rendering when new props or state are received. It is used to update the state based on the props.

Example:

        class ExampleComponent extends React.Component {
            static getDerivedStateFromProps(props, state) {
                if (props.userID !== state.userID) {
                    return { userID: props.userID };
                }
                return null;
            }

            render() {
                return <div>Hello, World!</div>;
            }
        }
    

getSnapshotBeforeUpdate

This method is called right before the most recently rendered output is committed to the DOM. It allows you to capture some information from the DOM before it changes.

Example:

        class ExampleComponent extends React.Component {
            getSnapshotBeforeUpdate(prevProps, prevState) {
                if (prevProps.list.length < this.props.list.length) {
                    const list = this.listRef.current;
                    return list.scrollHeight - list.scrollTop;
                }
                return null;
            }

            componentDidUpdate(prevProps, prevState, snapshot) {
                if (snapshot !== null) {
                    const list = this.listRef.current;
                    list.scrollTop = list.scrollHeight - snapshot;
                }
            }

            render() {
                return <div ref={this.listRef}>Hello, World!</div>;
            }
        }
    

static getDerivedStateFromError

This static method is called after an error has been thrown by a descendant component. It allows you to update the state to display an error message.

Example:

        class ErrorBoundary extends React.Component {
            static getDerivedStateFromError(error) {
                return { hasError: true };
            }

            render() {
                if (this.state.hasError) {
                    return <h1>Something went wrong.</h1>;
                }
                return this.props.children;
            }
        }
    

componentDidCatch

This method is called after an error has been thrown by a descendant component. It allows you to log the error and display a fallback UI.

Example:

        class ErrorBoundary extends React.Component {
            componentDidCatch(error, info) {
                console.error('Error caught by boundary:', error, info);
            }

            render() {
                if (this.state.hasError) {
                    return <h1>Something went wrong.</h1>;
                }
                return this.props.children;
            }
        }
    

Analogies

Think of a React component as a person going through different stages of life. At birth (componentDidMount), the person starts interacting with the world (fetching data). As they grow (componentDidUpdate), they adapt to changes (updating state). When they reach old age (componentWillUnmount), they prepare for their end (cleanup). The person also has moments of reflection (shouldComponentUpdate) to decide if they need to change (re-render). They learn from their experiences (getDerivedStateFromProps) and prepare for the future (getSnapshotBeforeUpdate). If they encounter a crisis (error), they handle it (static getDerivedStateFromError and componentDidCatch).