loading...
Cover image for React: useEffect explained with lifecycle methods
PROTOTYP

React: useEffect explained with lifecycle methods

adrianbdesigns profile image Adrian Bece Updated on ・2 min read

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.

Buy Me A Coffee

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

Posted on Aug 5 '19 by:

adrianbdesigns profile

Adrian Bece

@adrianbdesigns

React, Frontend, Magento 2 certified developer. Magento PWA Studio contributor. Rock and metal music fan. Reads Dune, sci-fi novels and Calvin & Hobbes. Creates amazing interfaces @ prototyp.digital

PROTOTYP

A software company with a design first approach. We design, build, and ship app interfaces, native and web apps and interactive products for startups and enterprises.

Discussion

markdown guide
 

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?

 

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

 

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

Also equivalent instead of eqivalent.

 

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

 

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.

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

 

I believe useLayoutEffect would be more accurate here.

 

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