MEDIUM: TrackerPage.jsx is 2386 lines with 44 hooks - maintainability and re-render risks #77

New Issue

Closed

opened 2026-05-31 12:03:40 -05:00 by null · 1 comment

null commented

2026-05-31 12:03:40 -05:00

Owner

Bug Description

TrackerPage.jsx is the largest component at 2386 lines with 44 state hooks (useState/useEffect/useCallback/useMemo). This creates several risks:

Stale closure bugs in useEffect callbacks that reference state without proper dependency arrays
Re-render cascades where one state change triggers dependent effects that trigger more state changes
Memory leak risk - no useEffect cleanup functions found for async operations that could resolve after unmount

Impact

Hard-to-debug state bugs, unnecessary re-renders, potential memory leaks on rapid navigation.

Recommended Fix

Break TrackerPage into smaller, focused components. Extract custom hooks for data fetching, bill editing, and month navigation. Add AbortController cleanup to useEffects with async fetches.

## Bug Description TrackerPage.jsx is the largest component at 2386 lines with 44 state hooks (useState/useEffect/useCallback/useMemo). This creates several risks: - Stale closure bugs in useEffect callbacks that reference state without proper dependency arrays - Re-render cascades where one state change triggers dependent effects that trigger more state changes - Memory leak risk - no useEffect cleanup functions found for async operations that could resolve after unmount ## Impact Hard-to-debug state bugs, unnecessary re-renders, potential memory leaks on rapid navigation. ## Recommended Fix Break TrackerPage into smaller, focused components. Extract custom hooks for data fetching, bill editing, and month navigation. Add AbortController cleanup to useEffects with async fetches.