React: useEffect explained with lifecycle methods

React's useEffect hook combines componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple useEffect hooks to be called in a single component.

You can read more about the useEffect hook here: React docs

Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.

componentDidMount equivalent

In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.

useEffect(() => {
  /* ComponentDidMount code */
}, []);

componentDidUpdate equivalent

In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case, var1 and var2).

useEffect(() => {
  /* componentDidUpdate code */
}, [var1, var2]);

componentWillUnmount equivalent

In order to have this hook run when the component is unmounted, we need to return a function from the hook. If we want cleanup function to run only when component has unmounted, we need to set an empty array. If we set one or more variables in the dependency array, cleanup will run at every re-render.

useEffect(() => {
  return () => {
   /* componentWillUnmount code */
  }
}, []);

All three combined

useEffect(() => {

  /* componentDidMount code + componentDidUpdate code */

  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);

---

These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.

Comments

[Divyesh Parmar]

Is there a way to implement other Life Cycle Methods e.g., shouldComponentUpdate, which I guess mostly people use with React.PureComponent or that is what I have heard and learnt in interviews.

There is also other way to do it. I guess by using React.memo() function so how can we do that with functional component?

[Hieu Lam]

your post is simple but very nice and easy understand about useEffect

[guico33]

Small typo in the last code snippet. I believe you meant componentDidMount rather than componentWillMount in the first comment.

Also equivalent instead of eqivalent.

[Adrian Bece]

Good catch. Thank you, I've fixed it now.

[guico33]

In addition to my previous comment, it is incorrect to say the dependency array doesn't affect the cleanup fn returned by the callback.

It is equivalent to componentDidUnmount if an empty array is passed, otherwise it will run whenever a dep changes, after the component has rendered with new props.

[Adrian Bece]

Double checked with docs, you're right. I've fixed the post. Thank you again.

[Steven Liao]

I believe useLayoutEffect would be more accurate here.

[Adrian Bece]

It depends on the use-case. UseEffect is generally more preferable.

[Shubhajit Halder]

How do I use componentWillMount() in useeffect?

I was asked this today in my interview. I had no answer.

Please let me know

[Divyesh Parmar]

ahh okay thank you :)

[KelahKelah]

I love that this article was simple and easy to understand! Thanks