Aborting data fetching
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.
Let's carry out the following steps:
- In
HomePage.tsx
, let's change theuseEffect
call to the following:React.useEffect(() => { let cancelled = false; const doGetUnansweredQuestions = async () => { const unansweredQuestions = await getUnansweredQuestions(); if (!cancelled...