Day 10: Lifecycle Methods in React

Introduction

Welcome back to Day 10 of our 30-day blog series on React.js! Today, we'll explore lifecycle methods in React and learn how to perform actions at different stages of a component's lifecycle. Lifecycle methods allow us to hook into specific points in a component's lifecycle, such as when it is mounted, updated, or unmounted.

Component Lifecycle Phases React components go through several lifecycle phases, divided into three main categories:

1. Mounting: These methods are called when an instance of a component is being created and inserted into the DOM.

2. Updating: These methods are called when a component is being re-rendered due to changes in props or state.

3. Unmounting: These methods are called when a component is being removed from the DOM.

Mounting Lifecycle Methods

• constructor: The constructor method is called before a component is mounted. It's used for initializing state and binding event handlers.

• render: The render method is required and is responsible for rendering the component's UI.

• componentDidMount: This method is called after the component is mounted into the DOM. It's commonly used for performing initialization that requires DOM nodes, such as fetching data from an API.

Updating Lifecycle Methods

• componentDidUpdate: This method is called after a component is updated in the DOM. It's useful for performing side effects after a component's state or props change.

• shouldComponentUpdate: This method determines whether a component should re-render after state or props change. It's used for optimizing performance by preventing unnecessary re-renders.

Unmounting Lifecycle Methods

• componentWillUnmount: This method is called just before a component is unmounted and destroyed. It's used for cleanup tasks such as removing event listeners or canceling API requests.

Example Usage

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

  componentDidMount() {
    this.timerID = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

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

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

In the above example, the Timer component updates the seconds count every second using setInterval. We clear the interval in componentWillUnmount to prevent memory leaks when the component is unmounted.

Lifecycle methods in React allow us to perform actions at different stages of a component's lifecycle, such as initialization, rendering, updating, and unmounting. Understanding and using lifecycle methods effectively is crucial for building well-structured and performant React applications.

Stay tuned for tomorrow's post, where we'll explore React Hooks, a powerful feature introduced in React 16.8 for adding state and other React features to functional components.