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...