From 14e29e36f63add1ee03e922669fe9ad7b674c136 Mon Sep 17 00:00:00 2001
From: CoderParth <parth.codp@gmail.com>
Date: Tue, 23 Jun 2026 18:07:49 +1000
Subject: [PATCH] fix: app hangs on load due to too many re-renders

---
 src/store/goalsSlice.ts                  | 11 ++++++++++-
 src/ui/pages/Main/goals/GoalsSection.tsx | 12 +++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/store/goalsSlice.ts b/src/store/goalsSlice.ts
index 1ed0276..23418e2 100644
--- a/src/store/goalsSlice.ts
+++ b/src/store/goalsSlice.ts
@@ -28,10 +28,19 @@ export const goalsSlice = createSlice({
     updateGoal: (state, action: PayloadAction<Goal>) => {
       state.map[action.payload.id] = action.payload
     },
+
+    createGoals: (state, action: PayloadAction<Goal[]>) => {
+      action.payload.forEach((goal) => {
+        state.map[goal.id] = goal
+        if (!state.list.includes(goal.id)) {
+          state.list.push(goal.id)
+        }
+      })
+    },
   },
 })
 
-export const { createGoal, updateGoal } = goalsSlice.actions
+export const { createGoal, updateGoal, createGoals } = goalsSlice.actions
 
 export const selectGoalsMap = (state: RootState) => state.goals.map
 export const selectGoalsList = (state: RootState) => state.goals.list
diff --git a/src/ui/pages/Main/goals/GoalsSection.tsx b/src/ui/pages/Main/goals/GoalsSection.tsx
index ab871b3..b27bd88 100644
--- a/src/ui/pages/Main/goals/GoalsSection.tsx
+++ b/src/ui/pages/Main/goals/GoalsSection.tsx
@@ -1,9 +1,13 @@
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import styled from 'styled-components'
 import { createGoal as createGoalApi, getGoals } from '../../../../api/lib'
-import { createGoal as createGoalRedux, selectGoalsList } from '../../../../store/goalsSlice'
+import {
+  createGoal as createGoalRedux,
+  createGoals as createGoalsRedux,
+  selectGoalsList,
+} from '../../../../store/goalsSlice'
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks'
 import {
   setContent as setContentRedux,
@@ -21,7 +25,9 @@ export default function GoalsSection() {
   useEffect(() => {
     async function fetch() {
       const goals = await getGoals()
-      goals?.forEach((goal) => dispatch(createGoalRedux(goal)))
+      if (goals != null) {
+        dispatch(createGoalsRedux(goals))
+      }
     }
     fetch()
   }, [dispatch])