Introduction to Lifecycle Methods

Key Concepts

• Mounting Phase
• Updating Phase
• Unmounting Phase
• Lifecycle Methods
• ComponentDidMount
• ComponentDidUpdate
• ComponentWillUnmount
• Error Handling

Mounting Phase

The Mounting Phase is the first phase in the lifecycle of a React component. During this phase, the component is created and inserted into the DOM. The key methods called during this phase are constructor, render, and componentDidMount.

Example:

        class MyComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = { data: [] };
            }

            componentDidMount() {
                fetch('https://api.example.com/data')
                    .then(response => response.json())
                    .then(data => this.setState({ data }));
            }

            render() {
                return (
                    <ul>
                        {this.state.data.map(item => (
                            <li key={item.id}>{item.name}</li>
                        ))}
                    </ul>
                );
            }
        }
    

Updating Phase

The Updating Phase occurs when a component's state or props change, causing the component to re-render. The key methods called during this phase are render and componentDidUpdate.

Example:

        class MyComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = { count: 0 };
            }

            componentDidUpdate(prevProps, prevState) {
                if (prevState.count !== this.state.count) {
                    console.log('Count has changed!');
                }
            }

            handleClick = () => {
                this.setState(prevState => ({ count: prevState.count + 1 }));
            }

            render() {
                return (
                    <div>
                        <p>Count: {this.state.count}</p>
                        <button onClick={this.handleClick}>Increment</button>
                    </div>
                );
            }
        }
    

Unmounting Phase

The Unmounting Phase is the final phase in the lifecycle of a React component. During this phase, the component is removed from the DOM. The key method called during this phase is componentWillUnmount.

Example:

        class MyComponent extends React.Component {
            componentDidMount() {
                this.interval = setInterval(() => console.log('Tick'), 1000);
            }

            componentWillUnmount() {
                clearInterval(this.interval);
            }

            render() {
                return (
                    <div>
                        <p>This component will unmount.</p>
                    </div>
                );
            }
        }
    

Lifecycle Methods

Lifecycle methods are special methods in React components that are automatically called at different stages of a component's lifecycle. These methods allow you to control what happens when a component is created, updated, or destroyed.

Example:

        class MyComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = { message: 'Hello' };
            }

            componentDidMount() {
                console.log('Component mounted');
            }

            componentDidUpdate() {
                console.log('Component updated');
            }

            componentWillUnmount() {
                console.log('Component will unmount');
            }

            render() {
                return (
                    <div>
                        <p>{this.state.message}</p>
                    </div>
                );
            }
        }
    

ComponentDidMount

componentDidMount is a lifecycle method that is called immediately after a component is mounted (inserted into the DOM). This is a good place to perform side effects such as data fetching or setting up subscriptions.

Example:

        class MyComponent extends React.Component {
            componentDidMount() {
                console.log('Component is mounted');
            }

            render() {
                return (
                    <div>
                        <p>This component has been mounted.</p>
                    </div>
                );
            }
        }
    

ComponentDidUpdate

componentDidUpdate is a lifecycle method that is called immediately after updating occurs. This method is not called for the initial render. It is useful for performing actions after the component's state or props have changed.

Example:

        class MyComponent extends React.Component {
            componentDidUpdate(prevProps, prevState) {
                if (prevState.count !== this.state.count) {
                    console.log('Count has been updated');
                }
            }

            render() {
                return (
                    <div>
                        <p>This component has been updated.</p>
                    </div>
                );
            }
        }
    

ComponentWillUnmount

componentWillUnmount is a lifecycle method that is called immediately before a component is unmounted and destroyed. This is a good place to perform cleanup such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount.

Example:

        class MyComponent extends React.Component {
            componentWillUnmount() {
                console.log('Component will unmount');
            }

            render() {
                return (
                    <div>
                        <p>This component will unmount soon.</p>
                    </div>
                );
            }
        }
    

Error Handling

Error handling in React components can be done using the componentDidCatch lifecycle method. This method allows you to catch errors that occur during rendering, in lifecycle methods, and in constructors of the whole tree below a component.

Example:

        class ErrorBoundary extends React.Component {
            constructor(props) {
                super(props);
                this.state = { hasError: false };
            }

            componentDidCatch(error, info) {
                this.setState({ hasError: true });
                console.error(error, info);
            }

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

Analogies

Think of the lifecycle methods as stages in a person's life. The Mounting Phase is like being born and growing up, the Updating Phase is like going through different stages of life, and the Unmounting Phase is like reaching the end of life. Each stage has its own set of tasks and responsibilities.

Another analogy is a theater play. The Mounting Phase is like the actors getting ready and taking their positions on stage, the Updating Phase is like the actors performing and reacting to each other, and the Unmounting Phase is like the actors leaving the stage after the play is over.