Add memoization on index

src/client/src/pages/index.tsx

@@ -4,18 +4,31 @@ import { ProjectsHeading } from "@src/components/common/headings/projectsHeading
 import { groupByProjects } from "@src/core/actions/utility/groupByProjects";
 import { todosApi } from "@src/infrastructure/apis/todosApi";
 import { AddTodo } from "@src/components/todos/addTodo";
+import { useMemo } from "react";
 
 const HomePage = () => {
   const { data, isLoading } = todosApi.useGetActiveTodosQuery();
 
+  const onlyActiveTodos = useMemo(
+    () => data.filter((t) => t.status === false),
+    [data]
+  );
+  const groupedTodos = useMemo(
+    () => groupByProjects(onlyActiveTodos),
+    [onlyActiveTodos]
+  );
+  const sections = useMemo(
+    () =>
+      Object.keys(groupedTodos)
+        .filter((s) => s !== "inbox")
+        .sort(),
+    [groupedTodos]
+  );
+
   if (isLoading) {
     return "loading...";
   }
 
-  const groupedTodos = groupByProjects(data);
-  const sections = Object.keys(groupedTodos)
-    .filter((s) => s !== "inbox")
-    .sort();
   return (
     <main className="py-8 px-14 space-y-6">
       <section className="space-y-8 mx-auto max-w-4xl">
@@ -31,10 +44,7 @@ const HomePage = () => {
           </div>
         )}
         {sections &&
-          sections.map(
-            (section) =>
-              groupedTodos[section].filter((t) => t.status !== true).length !==
-                0 && (
+          sections.map((section) => (
             <div key={section} className="space-y-2">
               <ProjectsHeading title={section} />
               <TodoList
@@ -44,8 +54,7 @@ const HomePage = () => {
                 hideProject
               />
             </div>
-              )
-          )}
+          ))}
         {data && data.length === 0 && (
           <div className="space-y-4">
             <PageHeading title="You're done!" />