Lifecycle Methods

Introduction

In this section, we will delve into the lifecycle methods of React components. Understanding these methods is crucial for managing component behavior throughout its existence, from creation to destruction. We'll cover both class-based and functional components, focusing on how lifecycle methods can be utilized effectively.

Concept

React components have a lifecycle that includes several stages: mounting (when a component is being inserted into the DOM), updating (when a component is being re-rendered as a result of changes in props or state), and unmounting (when a component is being removed from the DOM). Each stage has specific methods that you can override to run custom code at particular points.

Class-Based Components

Class-based components have lifecycle methods that are grouped into three main categories:

1. Mounting: Methods called when an instance of a component is being created and inserted into the DOM.
2. Updating: Methods called when a component is being re-rendered as a result of changes to either its props or state.
3. Unmounting: Method called when a component is being removed from the DOM.

Mounting

• constructor(props): Called before the component is mounted. Initialize state and bind methods here.
• static getDerivedStateFromProps(props, state): Invoked right before rendering the element(s) in the DOM. It should return an object to update state or null to indicate no change.
• render(): The only required method. It returns a React element that is then rendered into the DOM.
• componentDidMount(): Called immediately after a component is mounted. This is where you can initiate network requests, set up subscriptions, or perform any operations that require access to the DOM.

Updating

• static getDerivedStateFromProps(props, state): Also called during updates. It should return an object to update state or null to indicate no change.
• shouldComponentUpdate(nextProps, nextState): Allows you to control whether a re-render should happen or not. By default, it returns true.
• render(): Re-renders the component if shouldComponentUpdate returned true.
• getSnapshotBeforeUpdate(prevProps, prevState): Invoked right before the most recently rendered output is committed to the DOM. It can capture some information (e.g., scroll position) before the update.
• componentDidUpdate(prevProps, prevState, snapshot): Called immediately after updating occurs. This method is not called for the initial render.

Unmounting

• componentWillUnmount(): Invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers or canceling network requests.

Functional Components with Hooks

With the introduction of React Hooks, functional components can now use lifecycle methods through custom hooks like useEffect.

• useEffect(): Combines componentDidMount, componentDidUpdate, and componentWillUnmount functionalities. It runs after every render by default but can be controlled to run only on specific state or prop changes.

Examples

Class-Based Component Example

Let's create a simple class-based component that logs lifecycle events:

1class LifecycleExample extends React.Component {
2constructor(props) {
3  super(props);
4  this.state = { count: 0 };
5  console.log('Constructor');
6}
7 
8static getDerivedStateFromProps(props, state) {
9  console.log('getDerivedStateFromProps');
10  return null;
11}
12 
13componentDidMount() {
14  console.log('componentDidMount');
15}
16 
17shouldComponentUpdate(nextProps, nextState) {
18  console.log('shouldComponentUpdate');
19  return true;
20}
21 
22getSnapshotBeforeUpdate(prevProps, prevState) {
23  console.log('getSnapshotBeforeUpdate');
24  return null;
25}
26 
27componentDidUpdate(prevProps, prevState, snapshot) {
28  console.log('componentDidUpdate');
29}
30 
31componentWillUnmount() {
32  console.log('componentWillUnmount');
33}
34 
35render() {
36  console.log('render');
37  return (
38    <div>
39      <p>Count: {this.state.count}</p>
40      <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
41    </div>
42  );
43}
44}

Functional Component Example

Now, let's achieve the same functionality using a functional component with hooks:

1import React, { useState, useEffect } from 'react';
2 
3function LifecycleExample() {
4const [count, setCount] = useState(0);
5 
6useEffect(() => {
7  console.log('componentDidMount / componentDidUpdate');
8  return () => {
9    console.log('componentWillUnmount');
10  };
11}, []); // Empty dependency array means this effect runs only once after the initial render
12 
13console.log('render');
14 
15return (
16  <div>
17    <p>Count: {count}</p>
18    <button onClick={() => setCount(count + 1)}>Increment</button>
19  </div>
20);
21}

What's Next?

In the next section, we will introduce React Hooks, which provide a more flexible and powerful way to manage state and side effects in functional components. Understanding both class-based lifecycle methods and hooks will give you a comprehensive toolkit for building robust React applications.