React useEffect hook lifecycle

This article goes over the React 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');
};
}, []);

--

--

--

remarkablemark.org

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Everything Redux — Part 2

How to create smooth scroll for your website

The Nine Most Important React and Web Development Best Practices

How To Setup An Express JS Server With Nodemon and Babel

Using JSON Web Tokens for User Authentication in Your Web Application

Learning to Code: Day 36 — Basic JavaScript Part 1

Server-Side Rendering a React App Using Express.js

https://youtu.be/_BvFj8784v8

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
remarkablemark

remarkablemark

More from Medium

Props Vs. State in React.js

React Context: How to Use the useContext Hook

Building Custom Hooks in React