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');
  };
}, []);

This article was originally published on remarkablemark.org on August 22, 2021.