Overview
src/app/hooks/useDashboardWidgets.tsx reads from localStorage during initialization and may re-trigger reads on re-renders depending on its dependency array. localStorage.getItem is a synchronous blocking call; invoking it on every render in a hook used by the top-level dashboard component blocks the main thread unnecessarily.
Specifications
Features:
- localStorage is read at most once per mount, not on every render
- The read result is cached in a ref or useState, not re-derived on every call
Tasks:
- Move the
localStorage.getItem call into a lazy useState initializer: useState(() => JSON.parse(localStorage.getItem(KEY) ?? 'null') ?? DEFAULT_LAYOUT)
- Wrap with a try/catch to handle corrupted JSON gracefully
- Remove any
localStorage.getItem calls from render-path code
Impacted Files:
src/app/hooks/useDashboardWidgets.tsx
Acceptance Criteria
localStorage.getItem is called exactly once per component mount- Corrupted localStorage data falls back to the default layout without throwing
- React DevTools shows no unnecessary re-renders caused by the hook
Overview
src/app/hooks/useDashboardWidgets.tsxreads fromlocalStorageduring initialization and may re-trigger reads on re-renders depending on its dependency array.localStorage.getItemis a synchronous blocking call; invoking it on every render in a hook used by the top-level dashboard component blocks the main thread unnecessarily.Specifications
Features:
Tasks:
localStorage.getItemcall into a lazyuseStateinitializer:useState(() => JSON.parse(localStorage.getItem(KEY) ?? 'null') ?? DEFAULT_LAYOUT)localStorage.getItemcalls from render-path codeImpacted Files:
src/app/hooks/useDashboardWidgets.tsxAcceptance Criteria
localStorage.getItemis called exactly once per component mount