The useEffect React Hook
Short & Sweet series — part 3
Following the COVID-19 crisis that requires me to stay at home these days, I use the free time to promote myself to the goal of expert Front End developer. As part of my learning process, I try to share once a week an exciting thing that I learn.
I hope this experience will help you and me to keep learning new things even during these difficult days.❤️
Along with university studies and writing this series, I take advantage of these days to write personal projects and sharpen my coding skills.
I am going to do the first project twice, once in React Components and once with React Hooks.
The motivation to do so is that in my previous work we didn’t work with hooks and although I play with them a lot they do not feels naturally yet.
In this particular article, I will not explain what are hooks and React lifecycle but if you need a refresh scroll to the “resource” section, I attached relevant links.
Comparison between the effect hook and parallels life cycle method
The effect hook and the parallels life cycle are two different methodologies for access a piece of information that arrived, editing it, running tests on it and updating the design accordingly.
There are three phases in the component life cycle that the effect hook came to replace:
- componentDidMount: invoked immediately after a component is mounted.
- componentDidUpdate: invoked immediately after updating occurs.
- componentWillUnmount: invoked immediately before a component is unmounted and destroyed.
Classes life cycle method:
The effect hook generates access to a piece of information immediately after DOM mutations but before painting.
This blocks the browser.
The effect hook:
The effect hook generates access to a piece of information immediately after the browser painted the change.
This approach gives us the ability to take action on the data without blocking the browser.
How to use the effect hook:
This is an example of usage of the hook effect that only replaces the componentDidUpdate life cycle:
Two types of effects
The most common situations that we need to clean up effect is if it contains a subscription to an external data source or listener.
The best practice is to clean up effects from the previous render before running the effects next time and in the unmounting phase of the component.
How to cleanup effect hook:
comparison table between the effect hook and parallels life cycle method
Linke to other articles from this series:
Final Words
I hope you’ve enjoyed this article and learned new things.
If you like this post, I would appreciate applause and sharing :-)
If you have something to add or change I would love to hear ❤️
Who Am I?
My name is Michal Porag. I am a Full-Stack Developer working at Skillset and a Computer Science student at The Open University.
You can contact or follow me:
Twitter
My Youtube Chanel
Facebook
LinkedIn
Resources
- Using the Effect Hook — React documentation.
- React — The Complete Guide (incl Hooks, React Router, Redux).
- React.Component — React documentation.
- React source code relevant part.
