React useEffect hook lifecycle

React

This article goes over the React useEffect hook lifecycle:

  • Mount
  • Update
  • Unmount

Prerequisites

Import useEffect:

import { useEffect } from 'react';

Mount

Component did mount:

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

Update

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]);

Unmount

Component will unmount:

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