Aborting Data Fetching

Learn about aborting data fetching in React.

There is a slight problem in the page components at the moment when they request data and set it in the state. The problem is that if the user navigates away from the page while the data is still being fetched, the state will attempt to be set on a component that no longer exists. We are going to resolve this issue on the HomePage, QuestionPage, and SearchPage components by using a cancelled flag that is set when the components are unmounted. We will check this flag after the data is returned and the state is about to be set.

Steps to abort data fetching

Let's carry out the following steps:
1. In HomePage.tsx, let's change the useEffect call to the following:

Get hands-on with 1200+ tech skills courses.