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

@@ -54,5 +54,5 @@ export const getUnansweredQuestions = async(): Promise<QuestionData[]> => {
 };
 
 const wait = (ms: number): Promise<void> => {
-  return new Promise(resolve => setTimeout(resolve, ms))
+  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+};