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 theÂuseEffect
 call to the following:React.useEffect(() => {   let cancelled = false;   const doGetUnansweredQuestions = async () => {     const unansweredQuestions = await     getUnansweredQuestions();     if (!cancelled...