fix: app hangs on load due to too many re-renders

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

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])