P1: Ready-state effect causes infinite reload: status toggles to 'ready' inside loadAnalytics, which is in the effect dependency list, so every successful fetch re-triggers another fetch.

Check if this issue is valid — if so, understand the root cause and fix it. At src/features/analytics-dashboard/hooks/useAnalyticsDashboard.ts, line 32:

<comment>Ready-state effect causes infinite reload: status toggles to 'ready' inside loadAnalytics, which is in the effect dependency list, so every successful fetch re-triggers another fetch.</comment>

<file context>
@@ -0,0 +1,63 @@
+    refresh
+  } = store;
+
+  useEffect(() => {
+    initialize(config);
+  }, [initialize, config]);
</file context>

The initialize function is called on every render when the config prop changes because config is a dependency but is likely a new object reference each time. This will cause unnecessary re-initialization. Consider using a ref or deep comparison, or add a note in the component documentation that config should be memoized by the caller.

Stop loadAnalytics from looping on ready state

The useEffect that triggers loadAnalytics whenever status === 'ready' will re-run after every successful load because loadAnalytics itself flips status to loading and then back to ready. That creates a perpetual fetch loop even when the time range hasn’t changed, which can spam the backend and keep the dashboard constantly reloading. This happens after the first successful load (status transitions to ready → effect runs → loadAnalytics → ready again → effect runs…). Consider gating this effect on an actual time-range change or removing status as a trigger.

Useful? React with 👍 / 👎.

The data fetching logic in these useEffect hooks is flawed and will cause an infinite loop. The second effect is triggered when status becomes 'ready', which then calls loadAnalytics, which eventually sets the status back to 'ready', re-triggering the effect. While the store has a guard against concurrent loading, this still leads to unnecessary re-renders and at least one extra data fetch.

The data loading logic should be refactored to separate the initial data load from subsequent loads triggered by filter changes.

  const isMounted = React.useRef(false);

  useEffect(() => {
    initialize(config);
    loadAnalytics(user?.id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialize, config, user?.id]);

  useEffect(() => {
    if (isMounted.current) {
      loadAnalytics(user?.id);
    } else {
      isMounted.current = true;
    }
  }, [filters.timeRange]);

⚠️ Potential issue | 🔴 Critical

cat -n src/features/analytics-dashboard/hooks/useAnalyticsDashboard.ts

find . -name "AnalyticsDashboardStore*" -type f

cat -n ./src/features/analytics-dashboard/stores/AnalyticsDashboardStore.ts

python3 << 'EOF'
# Trace the execution flow

print("Initial state:")
print("  status: 'idle'")
print("  filters.timeRange: [initial]")
print("")

print("Step 1: Component mounts")
print("  Effect 1 runs (status === 'idle')")
print("  Calls: loadAnalytics(user?.id)")
print("")

print("Step 2: Inside loadAnalytics")
print("  Checks: if (status === 'loading') return;")
print("  status is 'idle', so continues")
print("  Sets: status = 'loading'")
print("  Starts async fetch")
print("")

print("Step 3: After async fetch completes")
print("  Sets: status = 'ready'")
print("  Component re-renders with new status")
print("")

print("Step 4: Effect 2 dependency check")
print("  Dependencies: [filters.timeRange, status, loadAnalytics, user?.id]")
print("  status changed from 'idle'/'loading' to 'ready'")
print("  Effect 2 runs (status === 'ready')")
print("  Calls: loadAnalytics(user?.id)")
print("")

print("Step 5: Inside loadAnalytics (second call)")
print("  Checks: if (status === 'loading') return;")
print("  status is currently 'ready', so continues")
print("  Sets: status = 'loading'")
print("  Starts async fetch AGAIN")
print("")

print("Step 6: After second async fetch completes")
print("  Sets: status = 'ready'")
print("  Component re-renders")
print("")

print("Step 7: Effect 2 runs AGAIN")
print("  status changed from 'loading' to 'ready'")
print("  Condition: if (status === 'ready') is TRUE")
print("  Calls: loadAnalytics(user?.id) AGAIN")
print("")

print("Conclusion: Loop confirmed!")
print("Each time loadAnalytics completes and sets status='ready',")
print("Effect 2 sees the status change and re-triggers,")
print("calling loadAnalytics again, which sets status='ready',")
print("which triggers Effect 2 again, etc.")
EOF

Effect re-fetches on every ready transition (potential infinite loop).

The effect depends on status, which transitions loading → ready after each loadAnalytics call. When status becomes ready, the effect re-triggers and calls loadAnalytics again, repeating the cycle. The guard in loadAnalytics prevents only concurrent requests, not sequential ones. Gate the effect on meaningful changes—missing data or timeRange updates—to avoid repeated fetches.

-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
...
-  const {
-    status,
-    filters,
-    initialize,
-    loadAnalytics,
-    updateFilters: setFilters,
-    refresh
-  } = store;
+  const {
+    data,
+    status,
+    filters,
+    initialize,
+    loadAnalytics,
+    updateFilters: setFilters,
+    refresh
+  } = store;
+
+  const previousTimeRange = useRef(filters.timeRange);
...
-  useEffect(() => {
-    if (status === 'ready') {
-      loadAnalytics(user?.id);
-    }
-  }, [filters.timeRange, status, loadAnalytics, user?.id]);
+  useEffect(() => {
+    if (status !== 'ready') return;
+    const timeRangeChanged = previousTimeRange.current !== filters.timeRange;
+    if (!data || timeRangeChanged) {
+      previousTimeRange.current = filters.timeRange;
+      loadAnalytics(user?.id);
+    }
+  }, [data, filters.timeRange, status, loadAnalytics, user?.id]);

In `@src/features/analytics-dashboard/hooks/useAnalyticsDashboard.ts` around lines
42 - 46, The effect in useAnalyticsDashboard.ts currently re-triggers on every
status === 'ready' transition causing repeated loadAnalytics calls; change the
effect to only call loadAnalytics when there's a meaningful need (e.g., status
is 'idle' or when filters.timeRange or user?.id actually changed or when
analytics data is missing). In practice, update the useEffect that references
status, filters.timeRange, loadAnalytics, and user?.id so it either removes
status from the dependency list and guards with if (status === 'idle') before
calling loadAnalytics, or checks for missing/stale analyticsData (e.g., compare
analyticsData.timeRange to filters.timeRange) and only then invokes
loadAnalytics(user?.id).

This effect will trigger a data reload every time the user switches from 'idle' to 'ready' status, which happens after the first successful load. This creates an infinite loop: when loadAnalytics completes, status becomes 'ready', which triggers this effect again at line 43, calling loadAnalytics again, setting status to 'loading', then back to 'ready', repeating indefinitely. Remove the effect at lines 42-46 since the effect at lines 36-40 already handles the initial load when status is 'idle'.