Stopping a data state being set if the user navigates away from the page

There is a slight problem in the page components at the moment when they request data and set this in the state. The problem is 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 carrying out the following steps:

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

 useEffect(() => {
 let cancelled = false; 
 const doGetUnansweredQuestions = async () => {
 const unansweredQuestions = await getUnansweredQuestions();
 if (!cancelled) {
 setQuestions(unansweredQuestions);
 setQuestionsLoading(false);
 }
 };
 doGetUnansweredQuestions();
 return () => {
 cancelled = true; 
 };
 }, []);

We use a cancelled...