A few reasons why we may want to run some code after each render:
- fetch data from a backend service
- subscribe to a stream of data
- manage timers and intervals
- read from and make changes to the DOM
If you’ve worked with class components’ lifecycle methods, think of the Effect Hook as
componentWillUnmount() all combined into one.
useEffect() is a function that we’ll use to execute some code after the first render, after each re-render, and after the last render of a function component. Later in this lesson, we’ll learn how to fine-tune exactly when this code is executed even further.
In the editor, we’ve defined a component that behaves the same way both as a class and as a function.
Start by having a look at both implementations, just to get a sense of both options.
Ready to start using the Effect Hook? Great! We’ll dive into the details of how to use this Hook throughout this lesson!