Problem
The application currently triggers a direct localStorage write on every single keystroke. This causes excessive write cycles and performance lag in React rendering loops, especially when editing rich content areas.
Expected Behavior
Implement a custom debounce hook (useDebounce) so that localStorage sync triggers only after the user pauses typing for 500ms.
Target Files
src/app/resume-builder/page.tsx
- Create a new hook in
src/app/lib/hooks.ts or src/app/lib/useDebounce.ts
Suggested Steps
- Create a
useDebounce hook that wraps the saving state.
- Modify the input handlers in the resume builder to update local state immediately (for visual responsiveness) but delay the serialization/storage routine until the debounce delay finishes.
- Test by logging saves in dev mode to confirm it registers only one write per pause.
Problem
The application currently triggers a direct
localStoragewrite on every single keystroke. This causes excessive write cycles and performance lag in React rendering loops, especially when editing rich content areas.Expected Behavior
Implement a custom debounce hook (
useDebounce) so thatlocalStoragesync triggers only after the user pauses typing for500ms.Target Files
src/app/resume-builder/page.tsxsrc/app/lib/hooks.tsorsrc/app/lib/useDebounce.tsSuggested Steps
useDebouncehook that wraps the saving state.