Chap03 -> Implementing component state -> Using useEffect to execute logic

QandA/frontend/src/HomePage.tsx

@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PageTitle } from './PageTitle';
 import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions } from './QuestionsData';
 
-export const HomePage = () => (
+export const HomePage = () => {
+  useEffect(() => {
+    console.log('first rendered');
+  }, []);
+
+  return (
     <Page>
       <div>
         <PageTitle>Unanswered Questions</PageTitle>
         <button>Ask a question</button>{' '}
         {/* This button component is passed as children of Page */}
       </div>
-    <QuestionList
+      {/* <QuestionList
         data={getUnansweredQuestions()}
-      renderItem={(question) => <div>{question.title}</div>}
+      /> */}
-    />
     </Page>
-);
+  );
+};

QandA/frontend/src/QuestionsData.ts

@@ -48,11 +48,11 @@ const questions: QuestionData[] = [
   },
 ];
 
-export const getUnansweredQuestions = async(): Promise<QuestionData[]> => {
+export const getUnansweredQuestions = async (): Promise<QuestionData[]> => {
   await wait(500);
   return questions.filter((q) => q.answers.length === 0);
 };
 
 const wait = (ms: number): Promise<void> => {
-  return new Promise(resolve => setTimeout(resolve, ms))
+  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+};