Skip to content

perf: optimize API fetching with caching and debouncing (#11)#1624

Open
Subramaniyajothi6 wants to merge 1 commit into
aryandas2911:mainfrom
Subramaniyajothi6:feature/optimize-api-caching-debounce
Open

perf: optimize API fetching with caching and debouncing (#11)#1624
Subramaniyajothi6 wants to merge 1 commit into
aryandas2911:mainfrom
Subramaniyajothi6:feature/optimize-api-caching-debounce

Conversation

@Subramaniyajothi6

Copy link
Copy Markdown

📌 Description

Optimizes client-side API fetching by adding a lightweight in-memory GET cache and debouncing search inputs. This cuts redundant network requests during page navigation and rapid typing, with no external libraries added.

🔗 Related Issue

Closes #11

🛠 Changes Made

  • Add src/utils/apiCache.js — in-memory GET cache (60s TTL, prefix-based invalidate, clearCache, and in-flight request de-duplication so concurrent identical requests share one call).
  • Add src/hooks/useDebounce.js — generic value-debounce hook.
  • Route reads through the cache: tasks, routines, journal (list / by-date / analytics), and analytics.
  • Invalidate the relevant cache keys on every mutation (task add/update/delete/bulk, routine create/duplicate/delete, journal save/delete) so stale data is never served; clear the cache on logout.
  • Debounce the Daily Journal search (server-side fetch that previously fired one request per keystroke) and the Tasks search (client-side filter recompute).

📸 Screenshots (if applicable)

N/A — behavior-only optimization, no UI changes. Fewer/de-duplicated requests are visible in the browser Network tab.

✅ Checklist

  • Code runs locally
  • Followed project structure
  • No console errors
  • Properly tested changes
  • Linked the issue

🚀 Notes for Reviewers

  • Inputs stay fully responsive; only the value the filter/fetch reads is debounced.
  • Mutations refetch after invalidation, so the cache never serves stale data — savings come from cross-page navigation reuse and request de-duplication.
  • The Tasks search is client-side, so debouncing it reduces re-render/recompute rather than API calls; the Daily Journal search is server-side and now sends far fewer requests.
  • npm run lint and npm run build pass in frontend/.

@aryandas2911 Please review this pr

Add caching and debouncing to reduce redundant API
calls and improve responsiveness.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Optimize API Fetching with Caching and Debouncing

1 participant