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

Understanding Javascript imports and exports

On writing readable code

How my silly app turned into something potentially useful

JavaScript and its Industry Use Case:

Node.js connect to mysql DB via SSH tunnel

Practicing System Design in JavaScript: Cache System and the Shortest Path for Graph

Tricky concept and some problem solving using JavaScript.

Installation — BladeTail UI — Laravel Blade UI components with TailwindCSS and Alpine JS

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

React Hooks With Context

The useContext() hook in React

React.memo() & useMemo()