6 min readSaman Sahraei
React Query Patterns for Live Portfolio Demos
Stale times, refetch intervals, and optimistic UI for dashboards that look alive without pretending to be production infrastructure.
React QueryNext.jsDX
Portfolio demos sit in an awkward middle ground: they must feel realtime, but they should not hammer a mock API like a stress test. React Query is the right layer because it separates server state from UI state while giving you precise control over freshness.
queryOptions over useEffect
Every demo fetch is defined once with queryOptions — typed query keys, Zod-validated responses, and explicit staleTime. Components stay dumb; the cache owns retry, dedupe, and background refresh.
- Short staleTime + refetchInterval for monitoring-style panels
- Long staleTime for static geospatial payloads
- Route-level loading.tsx shells so navigation feels immediate
- Dynamic imports for heavy chart and map chunks
The result is a demo that reads as live telemetry while remaining cheap to run on a static deployment.