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. What exactly is a side effect? In the context of a React functional component, a side effect is any operation that interacts with the outside world or produces a result that isn't directly related to rendering JSX. This includes things such as fetching data from an API, subscribing to external data sources, or setting up event listeners. Another way to...