Performing initialization and cleanup actions
Often, our React components need to perform actions when the component is created. For example, a common initialization action is to fetch the API data that the component needs. Another common action is to make sure that any pending API requests are canceled when the component is removed. In this section, you’ll learn about the useEffect
hook and how it can help you with these two scenarios. You’ll also learn how to make sure that the initialization code doesn’t run too often.
Fetching component data
The useEffect
hook is used to run “side effects” in your component. Another way to think about side-effect code is that functional components have only one job: returning JSX content to render. If the component needs to do something else, such as fetching API data, this should be done in a useEffect
hook. For example, if you were to just make the API call as part of your component function, you would...