React useEffect hook lifecycle

Aug 22, 2021

This article goes over the React useEffect hook lifecycle:

Prerequisites

Import useEffect:

import { useEffect } from 'react';

Component did mount:

useEffect(() => {
  console.log('mount');
}, []);

Component did update:

useEffect(() => {
  console.log('update');
});

Component did update on data change:

useEffect(() => {
  console.log('update on data change');
}, [data]);

Component will unmount or did update on data change:

useEffect(() => {
  return () => {
    console.log('update on data change or unmount');
  };
}, [data]);

Component will unmount:

useEffect(() => {
  return () => {
    console.log('unmount');
  };
}, []);