This article comes from my Complete LPI Open Source Essentials Exam Study Guide Udemy course and book. You can also view the video version.

What are Software Releases?

There are several types of software releases and some related versioning methods used to keep track of software changes and to communicate them to users. We'll start with releases.

• There's the alpha release – an initial version of software that is typically not feature-complete and is not intended for use by the general public. It is used for testing and internal use only.
• A beta release is a pre-release version of software that is feature-complete but may still have bugs or other issues. It is released to a limited audience for testing and feedback before the final release.
• Next will be a release candidate, which is a version of software that is considered stable and ready for release, pending final testing and bug fixes.
• And finally you'll produce a general availability release as the final version of software that's released to the general public.

What is Software Versioning?

Software versioning (sometimes known as semantic versioning) is the practice of assigning unique version numbers to different releases of software.

Here's a useful example:

vmlinuz-5.19.0-40-generic

In some approaches, the first number in the version number ("5" in this case) is the major version. A major version change indicates significant changes or new features that are not backward compatible with previous versions.

The second number ("19") is the minor version. A minor version change indicates new features or functionality that are backward compatible with previous versions.

The third number in the version number ("0") is the patch version. A patch version change indicates bug fixes or minor changes that are backward compatible with previous versions.

Why distinguish between major and minor releases? Major releases are typically used for significant changes or new features that are not backward compatible with previous versions. Major releases are usually announced to users and customers with a lot of fanfare, as they represent a significant milestone in the development of the software.

Minor releases, on the other hand, are used for smaller changes or new features that are backward compatible with previous versions. Minor releases are typically released more frequently and are intended to provide users with incremental improvements to the software.

What Does Backward Compatibility Mean?

Backward compatibility is the ability of a newer version of software or system to work with files, data, and other components created in an older version of that software or system. This means that users can upgrade to the newer version without losing access to their existing data or files.

For example, let's assume a user has created a document in an older version of a word processing program. If the newer version of the program is backward compatible, the user can open and edit the same document without any issues. This is because the newer version of the program is designed to read and interpret the file format used in the older version.

However, if the newer version of the program is not backward compatible, the user may not be able to open or edit the file created in the older version without first converting or re-creating it in the newer version. This can be a significant inconvenience for users and can lead to compatibility issues and data loss.

Here are some more quick – but important – definitions.

Feature Freeze

Feature freeze is a stage in the software development process where no new features are added to the product or project. It is typically implemented as a deadline by which all new features must be completed and approved before the release of the software product.

The primary goal of a feature freeze is to stabilize the software product in preparation for release. By setting a feature freeze deadline, developers can focus on completing and testing existing features rather than introducing new ones. This allows time for rigorous testing and bug fixing, improving the overall quality and reliability of the software product.

Roadmaps

A roadmap is a high-level strategic document that outlines the goals, objectives, and timeline for a software product's development. It provides a visual representation of the product development plan, outlining key milestones and the expected timeline for completion.

Roadmaps are useful for communicating the overall direction of a software product to stakeholders, including developers, product managers, investors, and customers.

Milestones

Milestones are specific, measurable achievements that mark progress towards the completion of a software product. They're typically set at regular intervals throughout the development process and are used to track progress and ensure that the project stays on schedule.

Examples of milestones might include the completion of a specific feature, the successful completion of a testing phase, or the release of a beta version of the software product.

Changelog

A changelog is a document that lists the changes made to a software product over time, including bug fixes, new features, and other updates. Changelogs allow developers and other stakeholders to understand what's been updated and when.

Changelogs are particularly useful for software products that are updated frequently or have a large number of contributors.

Long Term Support (LTS)

Long term support refers to a software version that is designated for longer-term support and maintenance, typically for a period of several years. During this time, the software vendor provides ongoing support, including bug fixes, security updates, and other maintenance activities.

LTS versions are often used in enterprise environments where stability and reliability are critical. In April of each even year, for example, Canonical will release an LTS version of Ubuntu. These versions are normally supported for four or five years.

End of Life (EOL)

On the other hand, end-of-life refers to a point in time when a software version is no longer supported by the vendor. This means that the vendor will no longer provide updates or fixes for the software, and any security vulnerabilities or bugs that are discovered will not be addressed. This can leave users with unsupported software that may be prone to security risks and other issues.

When a software product reaches its end-of-life, it is typically retired, and users are encouraged to upgrade to a newer version or switch to a different product. The EOL process is often gradual, with the vendor providing advance notice and guidance to users to help them migrate to a new version or product.

Conclusion

You've seen how it's important to understand the stages through which successful software projects will move. And this isn't just theoretical, because this knowledge gives you the tools to track your progress and quickly identify when things are going off rails.

This article comes from my Complete LPI Open Source Essentials Study Guide course__. And there's much more technology goodness available at bootstrap-it.com

This means that components can perform specific tasks at different stages of their existence, from the moment they are created to the point they are removed from the user interface.

Lifecycle methods have been a fundamental part of React for many years. But with the introduction of hooks, React's approach to managing state and side effects in functional components has become more intuitive and flexible.

Just a quick note: although hooks generally replace class components, there are no plans to remove classes from React.

Why This Guide?

In this tutorial, you will learn about class component lifecycle methods such as componentDidMount, componentDidUpdate, componentWillUnmount, and shouldComponentUpdate.

You'll also explore React hooks like useState, useEffect, and useContext, and understand why they were introduced. This will make your React journey smoother and more enjoyable.

Whether you're just getting started with React or looking to deepen your understanding, this guide will equip you with the knowledge you need to build responsive and interactive web applications using React's powerful tools.

Let's dive in and uncover the magic of React lifecycle methods and hooks.

How the Component Lifecycle Works

In React, components go through a lifecycle composed of distinct stages. Each of these stages offers specific methods that you can customize to run code at various moments during a component's existence.

These methods help you perform tasks such as initializing data, managing updates, and tidying up resources as needed.

Class Component Lifecycle Methods

Let's start by looking at the class component lifecycle methods. These were the primary way to manage component lifecycle before the introduction of hooks.

How to use componentDidMount:

This is called after a component has been inserted into the DOM. It's a great place to perform initial setup tasks, like fetching data from an API or setting up event listeners.

Code example:

import React, { Component } from 'react';

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    // This is where you can perform initial setup.

    // In this example, we simulate fetching data from an API after the             component has mounted.
    // We use a setTimeout to mimic an asynchronous operation.
    setTimeout(() => {
      const fetchedData = 'This data was fetched after mounting.';
      this.setState({ data: fetchedData });
    }, 2000); // Simulate a 2-second delay
  }

  render() {
    return (
      <div>
        <h1>componentDidMount Example</h1>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default MyComponent;

In this example, we created a class component called MyComponent. In the constructor, the component's state is initialized with data set to null, and we use it to store the fetched data.

In the componentDidMount method, we simulate fetching data from an API using setTimeout to mimic an asynchronous operation. After 2 seconds (2000 milliseconds), the component's state updates with the fetched data.

In the render method, content is conditionally rendered based on the data state. If data is null, a Loading data... message is displayed. Otherwise, the fetched data is displayed.

When you use this component in your application, you'll notice that the Loading data... message is shown initially, and after 2 seconds, the fetched data is displayed. This demonstrates how componentDidMount is useful for performing tasks after a component has been added to the DOM.

How to use componentDidUpdateB:

This is called after a component has re-rendered due to changes in its state or props. It's a great place to handle side effects or perform additional actions based on those changes.

Code Example:

import React, { Component } from 'react';

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

  // This method will be called when the "Increment" button is clicked
  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // componentDidUpdate is called after the component updates
  componentDidUpdate(prevProps, prevState) {
    // You can access the previous props and state here
    console.log('Component updated');
    console.log('Previous state:', prevState);
    console.log('Current state:', this.state);
  }

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

export default Counter;

In this code example, we create a Counter class component with a constructor that initializes the count state to 0. The handleIncrement method updates the count state when the Increment button is clicked.

Inside the componentDidUpdate lifecycle method, we log a message (Component updated) to the console. We also log both the previous state (prevState) and the current state (this.state). This demonstrates how you can access both the previous and current values during an update. The render method displays the current count and a button to increment it.

Now, when you use this Counter component in your application, open the browser's console. Every time you click the Increment button, you'll see messages in the console indicating that the component has updated, along with the previous and current state values.

You can use componentDidUpdate for various purposes, such as making network requests when props or state change, updating the DOM based on state changes, or interacting with third-party libraries after an update. It provides a way to perform actions that should occur specifically after a component has re-rendered.

How to use componentWillUnmount

This is called just before a component is removed from the DOM. It's a crucial place to perform cleanup tasks, such as clearing timers, unsubscribing from events, or releasing resources to prevent [memory leaks](https://en.wikipedia.org/wiki/Memory_leak#:~:text=In computer science%2C a memory,longer needed is not released.).

Let's illustrate a simple React component that sets up a timer when it mounts, using componentDidMount method, and clears that timer when it unmounts using the componentWillUnmount method.

Code example:

import React, { Component } from 'react';

class TimerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0,
    };
    this.timer = null; // Initialize the timer
  }

  // When the component mounts, start the timer
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000); // Update every 1 second (1000 milliseconds)
  }

  // When the component unmounts, clear the timer to prevent memory leaks
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <h1>Timer Component</h1>
        <p>Elapsed Time: {this.state.seconds} seconds</p>
      </div>
    );
  }
}

export default TimerComponent;

In this example, we created the TimerComponent class. Inside the constructor, the component's state is initialized with a seconds property, which we'll use to keep track of the elapsed time. The timer variable is also set to null.

In the componentDidMount lifecycle method, the timer is started by using setInterval. This timer increments the seconds state property every second.

In the componentWillUnmount lifecycle method, the timer is cleared using clearInterval to ensure that it doesn't continue running after the component has been removed from the DOM.

In the render method, the elapsed time is displayed based on the seconds state property.

When you use this TimerComponent in your application and render it, you'll notice that the timer starts when the component is mounted and stops when the component is unmounted. This is thanks to the cleanup performed in the componentWillUnmount method. This prevents resource leaks and ensures that
the timer is properly managed throughout the component's lifecycle.

How to use shouldComponentUpdate

We use this lifecycle method to control whether a component should re-render when its state or props change. It is particularly useful for optimizing performance by preventing unnecessary renders.

Let's create a simple React class component and use the shouldComponentUpdate method to decide whether the component should re-render based on changes in its state.

Code Example:

import React, { Component } from 'react';

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

  shouldComponentUpdate(nextProps, nextState) {
    // Allow the component to re-render only if the count is even
    if (nextState.count % 2 === 0) {
      return true; // Re-render
    }
    return false; // Don't re-render
  }

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

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

export default Counter;

In this example, we created the Counter class component that maintains a count state, which starts at 0. In the shouldComponentUpdate method, we check whether the next state's count is even. If it is, we allow the component to re-render. Otherwise, we prevent the re-render.

The incrementCount method is called when the Increment button is clicked. It updates the count state by incrementing it.

In the render method, the current count and a button to increment it is displayed.

If you click the Increment button and the count becomes an odd number, the component won't re-render. This behavior demonstrates how shouldComponentUpdate can be used to optimize rendering in situations where not all state changes should trigger a re-render.

Introducing React Hooks

React introduced hooks in version 16.8. They granted functional components access to state and various React features without writing class components.

As a result, class components have become largely unnecessary. Hooks simplify component logic and make it more reusable.

Why use Hooks?

Hooks were introduced to address several issues and make React code easier to understand and maintain:

• Complexity – class components can become complex when managing state and side effects.

• Reusability – logic in class components isn't easily shareable between components.

• Learning Curve – class components introduce a steeper learning curve for newcomers to React.

Commonly used React Hooks

The useState hook

useState lets you add state to functional components. It returns an array with the current state value and a function to update it.

Code Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, we used the useState hook to manage a counter's state. When the Increment button is clicked, setCount updates the count state, causing the component to re-render with the updated value.

The useEffect hook

useEffect is used for side effects in functional components, similar to componentDidMount and componentDidUpdate. It runs after rendering and can be controlled by specifying dependencies.

Code Example:

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array, runs only once

  return <div>{data ? data.message : 'Loading...'}</div>;
}

In this example, useEffect is used to fetch data from an API when the component mounts. The empty dependency array [] ensures that the effect runs only once.
When the data is fetched, setData updates the data state, causing a re-render with the fetched information.

The useContext hook

useContext allows functional components to access context values. It's a way to pass data down the component tree without explicitly passing props.

Code Example:

import React, { useContext } from 'react';

// Create a context
const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);

  return <div>Context Value: {value}</div>;
}

In this example, we create a context called MyContext. The useContext hook allows MyComponent to access the value stored in this context. It's a powerful tool for managing global state in your application.

Benefits of custom hooks

Custom hooks are functions that use hooks internally and can be reused across multiple components. They help encapsulate and share complex logic.

Here's an example of a custom hook called useLocalStorage that simplifies storing and retrieving data in the browser's local storage:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  // Retrieve the stored value from local storage
  const storedValue = localStorage.getItem(key);

  // Initialize the state with the stored value or the initial value
  const [value, setValue] = useState(storedValue || initialValue);

  // Update the local storage whenever the state changes
  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, newValue);
  };

  return [value, setStoredValue];
}

export default useLocalStorage;

In this custom hook, we import useState from React because we'll use it to manage the state. The useLocalStorage function takes two parameters:

• key: A string representing the key under which the data will be stored in local storage.

• **initialValue**: The initial value for the state.

Inside the hook, we first attempted to retrieve the stored value from local storage using localStorage.getItem(key). Then we initialized the state variable value using useState, using the storedValue if it exists or the initialValue if not.

Next, we defined a function setStoredValue that updates both the state and the local storage when called. It sets the new value in local storage using localStorage.setItem(key, newValue).

Finally, we returned an array [value, setStoredValue] as the hook's return value, allowing components to access the stored value and update it as needed.

Here's an example of how you can use the useLocalStorage hook in a component:

import React from 'react';
import useLocalStorage from './useLocalStorage'; // Import the custom hook

function App() {
  // Use the custom hook to manage a "username" stored in local storage
  const [username, setUsername] = useLocalStorage('username', 'Guest');

  const handleInputChange = (e) => {
    setUsername(e.target.value);
  };

  return (
    <div>
      <h1>Hello, {username}!</h1>
      <input
        type="text"
        placeholder="Enter your username"
        value={username}
        onChange={handleInputChange}
      />
    </div>
  );
}

export default App;

In this example, we import the useLocalStorage custom hook and use it to manage a username value in local storage. The component initializes the username state using the hook and updates it when the input field changes.

The value is stored and retrieved from local storage, allowing it to persist across page reloads.

Custom hooks are a powerful way to encapsulate and reuse complex logic in React applications, making your code more modular and maintainable.

Conclusion

React provides developers with powerful tools to manage the lifecycles of their components. These lifecycles allow components to perform specific tasks at different stages of their existence, from creation to removal.

In this guide, we've explored React's class component lifecycle methods. These methods have been a fundamental part of React for many years and continue to be relevant in certain scenarios.

You've also been introduced to React Hooks. These have become the preferred way to manage state and side effects in React applications. They offer a more intuitive and flexible approach to building components.

While hooks have gained popularity and generally replace the need for class components, it's important to note that there are no plans to remove class components from React. Existing codebases and third-party libraries may still use class components, so understanding both class component lifecycles and hooks is
valuable for React developers.

In summary, React's lifecycle methods and hooks are crucial for building dynamic and efficient applications, and they offer developers a range of options to manage component behavior and state. As you continue to explore and work with React,
you'll find that having a solid understanding of both lifecycles and hooks will make you a more versatile and capable React developer.

If you found this guide helpful and enjoyable, please give it a like. For more insightful tutorials, follow me on X for updates 🙏.

Enjoy your coding!

A component's lifecycle has three main phases: the Mounting Phase, the Updating Phase, and the Unmounting Phase.

The Mounting Phase begins when a component is first created and inserted into the DOM. The Updating Phase occurs when a component's state or props change. And the Unmounting Phase occurs when a component is removed from the DOM.

Component Mounting Phase

The mounting phase refers to the period when a component is being created and inserted into the DOM.

During this phase, several lifecycle methods are invoked by React to enable the developer to configure the component, set up any necessary state or event listeners, and perform other initialization tasks.

The mounting phase has three main lifecycle methods that are called in order:

The constructor() lifecycle method

The constructor() method is called when the component is first created. You use it to initialize the component's state and bind methods to the component's instance. Here's an example:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

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

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

export default Counter;

In this example, the constructor() method sets the initial state of the component to an object with a count property set to 0, and binds the handleClick method to the component's instance. The handleClick method increments the count state property when the button is clicked.

The render() lifecycle method

The render() method is responsible for generating the component's virtual DOM representation based on its current props and state. It is called every time the component needs to be re-rendered, either because its props or state have changed, or because a parent component has been re-rendered.

In the above example in the constructor part:

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

The render method displays the current count value and a button. When the button is clicked, the handleClick method is invoked. This triggers a state update, causing a re-render, and the updated count is displayed.

The getDerivedStateFromProps() lifecycle method

getDerivedStateFromProps() is a lifecycle method available in React 16.3 and later versions that is invoked during the mounting and updating phase of a component.

During the mounting phase, getDerivedStateFromProps() is called after the constructor and before render(). This method is called for every render cycle and provides an opportunity to update the component's state based on changes in props before the initial render.

The signature of getDerivedStateFromProps() is as follows:

static getDerivedStateFromProps(props, state)

It takes two parameters:

props: The updated props for the component.

state: The current state of the component.

The method should return an object that represents the updated state of the component, or null if no state update is necessary.

It's important to note that getDerivedStateFromProps() is a static method, which means it does not have access to the this keyword and cannot interact with the component's instance methods or properties.

import React from 'react';
import ReactDOM from 'react-dom';
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritefood: "rice"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritefood: "pizza"})
    }, 1000)
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritefood: props.favfod };
  }
   render() {
    return (
      <h1>My Favorite Food is {this.state.favoritefood}</h1>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById('root'));

This is a React component named Header that renders an <h1> element with a string that includes the value of this.state.favoritefood.

The component has a constructor that sets the initial state of favoritefood to "rice".

The componentDidMount() method is also defined, which is called when the component is mounted in the DOM. In this method, there's a setTimeout() function that updates the state of favoritefood to "pizza" after 1 second (1000 milliseconds).

The component also has a static getDerivedStateFromProps() method that takes props and state as arguments and returns an object with a key of favoritefood and a value of props.favfod. This method is called during the mounting and updating phase of the component and is used to derive the state from props.

Finally, the component's render() method returns the <h1> element with the value of this.state.favoritefood.When the component is rendered using ReactDOM.render(), it's mounted to the element with an ID of "root".

The componentDidMount() lifecycle method

The componentDidMount() method is called once the component has been mounted into the DOM. It is typically used to set up any necessary event listeners or timers, perform any necessary API calls or data fetching, and perform other initialization tasks that require access to the browser's DOM API.

Here's an example:

import React from 'react';
import ReactDOM from 'react-dom';
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritefood: "rice"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritefood: "pizza"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Food is {this.state.favoritefood}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

This code defines a React component called Header that extends the React.Component class. The component has a constructor that initializes the component state with a property called favoritefood set to the string "rice".

The component also has a componentDidMount lifecycle method, which is called by React after the component has been mounted (that is, inserted into the DOM). In this method, a setTimeout function is used to delay the execution of a function that updates the favoritefood state property to "pizza" by 1 second.

Finally, the component has a render method that returns a JSX expression containing an h1 element with the text "My Favorite Food is" and the current value of the favoritefood state property.

Component Updating Phase

This phase occurs when a component's props or state changes, and the component needs to be updated in the DOM.

The shouldComponentUpdate() lifecycle method

The shouldComponentUpdate() method is called before a component is updated. It takes two arguments: nextProps and nextState. This method returns a boolean value that determines whether the component should update or not. If this method returns true, the component will update, and if it returns false, the component will not update.

Here's an example of how to use shouldComponentUpdate():

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = { favoriteFood: 'rice' };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Only re-render if the favoriteFood state has changed
    return this.state.favoriteFood !== nextState.favoriteFood;
  }

  changeFood = () => {
    this.setState({ favoriteFood: 'Pizza' });
  }

  render() {
    return (
      <div>
        <h1>My Favorite Food is {this.state.favoriteFood}</h1>
        <button type="button" onClick={this.changeFood}>Change food</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

The above code defines a Header component that displays the user's favorite food and allows the user to change it by clicking a button. The shouldComponentUpdate() method is implemented to only re-render the component if the favoriteFood state has changed, which is a good way to optimize performance.

The code uses ES6 syntax to define the component class and its methods, and imports Component from React to create the class. The ReactDOM.render() function is used to render the Header component to the DOM.

The componentWillUpdate() lifecycle method

componentWillUpdate() is a lifecycle method in React that gets called just before a component's update cycle starts. It receives the next prop and state as arguments and allows you to perform any necessary actions before the component updates.

But this method is not recommended for updating the state, as it can cause an infinite loop of rendering. It is primarily used for tasks such as making API calls, updating the DOM, or preparing the component to receive new data. componentWillUpdate() is often used in conjunction with componentDidUpdate() to handle component updates.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends Component {
  state = {
    count: 0,
  };

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

  componentWillUpdate(nextProps, nextState) {
    if (nextState.count !== this.state.count) {
      console.log(`Count is about to update from ${this.state.count} to ${nextState.count}.`);
    }
  }

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

const rootElement = document.getElementById('root');
ReactDOM.render(<MyComponent />, rootElement);

In this example, the componentWillUpdate method is called whenever the component is about to update. In this method, we can access the nextProps and nextState arguments to check if there are any changes to the component's state or props. If there are changes, we can perform some actions or log messages before the update happens.

The componentDidUpdate lifecycle method

The componentDidUpdate() method is a lifecycle method in React that is called after a component has been updated and re-rendered. It is useful for performing side effects or additional operations when the component's props or state have changed.

Here's an example of how to use the componentDidUpdate() method:

import React, { Component } from 'react';

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

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

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

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

export default ExampleComponent;

In this example, the componentDidUpdate() method is used to log a message to the console whenever the count state has been updated. It compares the previous state (prevState.count) with the current state (this.state.count) to check if there was a change.

Whenever the handleClick() method is called, the count state is incremented, triggering a re-render of the component. After the re-render, componentDidUpdate() is called, and it logs the updated count value to the console.

It's important to include a conditional check inside componentDidUpdate() to prevent infinite loops. If you want to update the state based on a prop change, make sure to compare the previous prop (prevProps) with the current prop (this.props) before updating the state.

Remember that componentDidUpdate() is not called during the initial render of the component, only on subsequent updates.

As of React 16.3, the componentDidUpdate() method can receive two additional arguments: prevProps and prevState. These arguments provide access to the previous props and state values, which can be useful for performing comparisons.

But if you are using a more recent version of React, you can utilize the useEffect() hook with dependency array to achieve similar functionality.

The getSnapshotBeforeUpdate lifecycle method

The getSnapshotBeforeUpdate() method is called just before the component's UI is updated. It allows the component to capture some information about the current state of the UI, such as the scroll position before it changes. This method returns a value that is passed as the third parameter to the componentDidUpdate() method.

Here's an example of how to use getSnapshotBeforeUpdate() to capture the scroll position of a component before it updates:

import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritefood: "rice"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritefood: "pizza"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritefood;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite food is " + this.state.favoritefood;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Food is {this.state.favoritefood}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

This is a React component called Header that renders a heading and a button that, when clicked, shows the user's favorite food. The component also has a state that keeps track of the favorite food and whether or not to show it.

The constructor method sets the component's initial state, including the default favorite food of "rice" and the showFavFood state variable to false.

The componentDidMount method is called after the component has been mounted to the DOM. In this case, it sets a timeout that will change the favorite food to "pizza" after one second.

The getSnapshotBeforeUpdate method is called right before the component is updated. It checks if the favoriteFood state variable has changed since the last update and returns an object with the previous favorite food if it has. Otherwise, it returns null.

The componentDidUpdate method is called after the component has been updated. It receives the previous props, state, and snapshot as arguments. In this case, it checks if the snapshot is not null and logs the previous favorite food to the console.

In the render method, the component renders a heading that displays the current favorite food state variable. When the button is clicked, the showFavFood state variable is set to true and a paragraph is rendered that displays the current favorite food state variable.

Finally, the ReactDOM.render function is called to render the Header component inside an HTML element with the id of "root".

Component Unmounting Phase

The unmounting phase refers to the lifecycle stage when a component is being removed from the DOM (Document Object Model) and is no longer rendered or accessible.

During this phase, React performs a series of cleanup operations to ensure that the component and its associated resources are properly disposed of.

The unmounting phase is the last stage in the lifecycle of a React component and occurs when the component is being removed from the DOM tree.

This can happen for various reasons, such as when the component is no longer needed, the parent component is re-rendered without including the child component, or when the application is navigating to a different page or view.

The componentWillUnmount() lifecycle method

During the unmounting phase, React calls the following lifecycle methods in order:

• componentWillUnmount(): This method is called just before the component is removed from the DOM. It allows you to perform any necessary cleanup, such as canceling timers, removing event listeners, or clearing any data structures that were set up during the mounting phase.
• After componentWillUnmount() is called, the component is removed from the DOM and all of its state and props are destroyed.

It's important to note that once a component is unmounted, it cannot be mounted again. If you need to render the component again, you will need to create a new instance of it.

Here's an example of how you might use the componentWillUnmount() method to perform cleanup:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends Component {
  state = {
    showChild: true,
  };

  handleDelete = () => {
    this.setState({ showChild: false });
  };

  render() {
    const { showChild } = this.state;

    return (
      <div>
        {showChild && <Child />}
        <button type="button" onClick={this.handleDelete}>
          Delete Header
        </button>
      </div>
    );
  }
}

class Child extends Component {
  componentWillUnmount() {
    alert('The component named Child is about to be unmounted.');
  }

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

const rootElement = document.getElementById('root');
ReactDOM.render(<MyComponent />, rootElement);

This is a React component that renders a MyComponent with a Child component that will be conditionally rendered based on the value of showChild state.

When the user clicks the "Delete Header" button, the handleDelete function will be called which will update the showChild state to false. This causes the Child component to unmount and trigger the componentWillUnmount lifecycle method, which will display an alert message.

The MyComponent class extends the Component class provided by React and defines a state variable showChild with an initial value of true. It also defines a function handleDelete that will be called when the user clicks the "Delete Header" button. This function updates the showChild state to false.

In the render method of MyComponent, the showChild state is used to conditionally render the Child component using the logical && operator. If showChild is true, the Child component will be rendered. Otherwise, it will not be rendered.

The Child class extends the Component class and defines a componentWillUnmount method that will be called just before the component is unmounted. In this case, it displays an alert message.

Finally, the ReactDOM.render method is called to render the MyComponent component inside the element with the ID "root" in the HTML document.

Conclusion

In summary, React components have a lifecycle consisting of three phases: Mounting, Updating, and Unmounting. Each phase has specific lifecycle methods that are called at different points in the component's lifecycle.

Understanding these lifecycle methods can help developers to control the component's behavior and perform specific actions at different stages of its lifecycle.

In this article, we are going to explore the lifecycle methods of ReactJS. But, before moving ahead to React’s different lifecycle methods, we should understand what it is.

As we know, everything in this world follows a cycle (say humans or trees). We are born, grow, and then die. Almost everything follows this cycle in its life, and React components do as well. Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle.

There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is. These methods give us better control over our component and we can manipulate them using these methods.

At present, we know what lifecycle methods are and why they are important. So what are these different methods? Let’s have a look into them.

Lifecycle Methods

A component’s lifecycle is broadly classified into four parts:

• initialization
• mounting
• updating, and
• unmounting.

Let’s discuss the different lifecycle methods that are available at these different phases (i.e., initialization, mounting, updating & unmounting).

Initialization

This is the phase in which the component is going to start its journey by setting up the state (see below) and the props. This is usually done inside the constructor method (see below to understand the initialization phase better).

class Initialize extends React.Component {
    constructor(props)
    {
    // Calling the constructor of
    // Parent Class React.Component
    super(props);
    // initialization process
    this.state = {
       date : new Date(),
       clickedStatus: false
     };
}

Mounting

The name is self-explanatory. Mounting is the phase in which our React component mounts on the DOM (i.e., is created and inserted into the DOM).

This phase comes onto the scene after the initialization phase is completed. In this phase, our component renders the first time. The methods that are available in this phase are:

1. componentWillMount()

This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.

Note: You should not make API calls or any data changes using this.setstate in this method because it is called before the render method. So, nothing can be done with the DOM (i.e. updating the data with API response) as it has not been mounted. Hence, we can’t update the state with the API response.

2. componentDidMount()

This method is called after the component gets mounted on the DOM. Like componentWillMount, it is called once in a lifecycle. Before the execution of this method, the render method is called (i.e., we can access the DOM). We can make API calls and update the state with the API response.

Have a look to understand these mounting methods:

class LifeCycle extends React.Component {
  componentWillMount() {
      console.log('Component will mount!')
   }
  componentDidMount() {
      console.log('Component did mount!')
      this.getList();
   }
  getList=()=>{
   /*** method to make api call***
  }
  render() {
      return (
         <div>
            <h3>Hello mounting methods!</h3>
         </div>
      );
   }
}

Updating

This is the third phase through which our component passes. After the mounting phase where the component has been created, the update phase comes into the scene. This is where component’s state changes and hence, re-rendering takes place.

In this phase, the data of the component (state & props) updates in response to user events like clicking, typing and so on. This results in the re-rendering of the component. The methods that are available in this phase are:

1. shouldComponentUpdate()

This method determines whether the component should be updated or not. By default, it returns true. But at some point, if you want to re-render the component on some condition, then shouldComponentUpdate method is the right place.

Suppose, for example, you want to only re-render your component when there is a change in prop — then utilize the power of this method. It receives arguments like nextProps and nextState which help us decide whether to re-render by doing a comparison with the current prop value.

2. componentWillUpdate()

Like other methods, its name is also self-explanatory. It is called before the re-rendering of the component takes place. It is called once after the ‘shouldComponentUpdate’ method. If you want to perform some calculation before re-rendering of the component and after updating the state and prop, then this is the best place to do it. Like the ‘shouldComponentUpdate’ method, it also receives arguments like nextProps and nextState.

3. ComponentDidUpdate()

This method is called just after the re-rendering of the component. After the new (updated) component gets updated on the DOM, the ‘componentDidUpdate’ method is executed. This method receives arguments like prevProps and prevState.

Have a look to understand the updating methods better:

class LifeCycle extends React.Component {
      constructor(props)
      {
        super(props);
         this.state = {
           date : new Date(),
           clickedStatus: false,
           list:[]
         };
      }
      componentWillMount() {
          console.log('Component will mount!')
       }
      componentDidMount() {
          console.log('Component did mount!')
          this.getList();
       }
      getList=()=>{
       /*** method to make api call***
       fetch('https://api.mydomain.com')
          .then(response => response.json())
          .then(data => this.setState({ list:data }));
      }
       shouldComponentUpdate(nextProps, nextState){
         return this.state.list!==nextState.list
        }
       componentWillUpdate(nextProps, nextState) {
          console.log('Component will update!');
       }
       componentDidUpdate(prevProps, prevState) {
          console.log('Component did update!')
       }
      render() {
          return (
             <div>
                <h3>Hello Mounting Lifecycle Methods!</h3>
             </div>
          );
       }
}

Unmounting

This is the last phase in the component’s lifecycle. As the name clearly suggests, the component gets unmounted from the DOM in this phase. The method that is available in this phase is:

1. componentWillUnmount()

This method is called before the unmounting of the component takes place. Before the removal of the component from the DOM, ‘componentWillUnMount’ executes. This method denotes the end of the component’s lifecycle.

Here is a flowchart representation of lifecycle methods:

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

Thanks!