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.
Top comments (11)
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 thancomponentWillMount
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.
How do I use componentWillMount() in useeffect?
I was asked this today in my interview. I had no answer.
Please let me know
ahh okay thank you :)
I love that this article was simple and easy to understand! Thanks