React lifecycle methods with the useEffect Hook

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. So we can create functional components.

In this article, we will compare React lifecycle using classes and hooks. In the end, you will understand why Hooks are awesome and made developers life much simple.

Mounting – componentDidMount()

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

Using classes:

class App extends React.Component {
  componentDidMount() {
    // Runs after the first render() lifecycle
  }
  render() {
    return <h1>Hello</h1>;
  }
}

Using Hooks:

import React, { useEffect} from 'react';

export default function App(){
  // the same of componentDidMount()
  useEffect(() => {
    // Inside this callback function we perform our side effects.
  });
}

Update- componentDidUpdate()

componentDidUpdate() is called after componentDidMount() and can be useful to perform some action when the state changes. componentDidUpdate() takes as its first two arguments the previous props and the previous state. Inside the method we can check if a condition is met and perform an action based on it.

Using classes:

class App extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevState.pokemons !== this.state.pokemons) {
      console.log('pokemons state has changed.')
    }
  }
  render() {
    return <h1>Hello</h1>;
  }
}

Using Hooks:

import React, { useEffect} from 'react';

export default function App({ totals }){
  // the same of componentDidUpdate()
  useEffect(() => {
    // Inside this callback function we perform our side effects.
  }, [totals]);
  return <h1>Hello</h1>;
}

When the parameter total changes, the function inside useEffect will be triggered. Or you can use a state, check below:

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

export default function App(){
  const [totals, setTotals] = 0;
  // the same of componentDidUpdate()
  useEffect(() => {
    // Inside this callback function we perform our side effects.
  }, [totals]);
  return <h1>Hello</h1>;
}

Unmouting – componentWillUnmount()

This lifecycle is responsible to do the cleanup in our DOM, especially when we want to remove a component from our DOM, in React this is called unmounting.

We have just one lifecycle method for that lifecycle stage called componentWillUnmount. This lifecycle method will be invoked when the component is about to be removed from the DOM:

Using classes:

class App extends React.Component {
  componentWillUnmount() {
    console.log("Component unmounted!");
  }
  render() {
    return <h1>Hello</h1>;
  }
}

Using Hooks:

import React, { useEffect} from 'react';

export default function App(){
  // the same of componentWillUnmount()
  useEffect(() => {
    console.log("Component unmounted!");
  }, []);
  return <h1>Hello</h1>;
}

Read more about useEffects here: https://overreacted.io/a-complete-guide-to-useeffect/