Caching

This article summarizes the DEV post “How to Use React Query for Efficient Data Fetching” and focuses on a minimal, production-ready setup. Why React Query (TanStack Query) Handles fetching, caching, retries, background refresh, and deduping. Removes useEffect + manual loading/error state boilerplate. Scales to pagination, infinite scroll, and SSR hydration. 3-step setup Install: npm install @tanstack/react-query Create a client and wrap your app: import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient(); const App = () => ( <QueryClientProvider client={queryClient}> <MyComponent /> </QueryClientProvider> ); Fetch with useQuery: import { useQuery } from "@tanstack/react-query"; function UsersList() { const { data, isLoading, error } = useQuery({ queryKey: ["users"], queryFn: () => fetch("/api/users").then((r) => r.json()), }); if (isLoading) return <p>Loading…</p>; if (error) return <p>Something went wrong</p>; return <ul>{data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>; } Features you get “for free” Auto refetch on window focus/network reconnect. Stale-while-revalidate caching with configurable TTLs. Retries with exponential backoff for transient failures. Query invalidation to refresh related data after mutations. Devtools for live inspection of query states. Power tips Prefetch likely-next routes to hide latency (e.g., on hover). Use useInfiniteQuery for endless scroll; surface hasNextPage/fetchNextPage. Pass auth tokens via queryFnContext; centralize fetcher. For SSR/Next.js, hydrate with dehydrate/Hydrate to avoid waterfalls. Performance guardrails Set per-query stale times and retry counts to balance freshness vs. load. Log slow queries and cache hit rate; watch INP/LCP when triggering refetches. Keep query keys stable and descriptive (e.g., ["post", postId]). Bottom line: React Query removes state-management overhead for remote data and delivers faster, more resilient UIs with minimal code.

Low-effort wins php artisan config:cache, route:cache, view:cache; warm on deploy. Enable OPcache with sane limits; preloading for hot classes when applicable. Use queues for emails/webhooks; keep HTTP requests lean. Database hygiene Add missing indexes; avoid N+1 with eager loading; paginate large lists. Use read replicas where safe; cap per-request query count in logs. Measure slow queries; set alarms on p95 query time. HTTP layer Cache responses with tags (Redis) for fast invalidation. Use CDN for static/media; compress and set cache headers. Leverage middleware to short-circuit authenticated user cache when possible. Observability Laravel Telescope or Horizon for queues; metrics on throughput, failures, latency. Log DB/query counts; track opcache hit rate and memory usage. Checklist Config/route/view cached on deploy. OPcache enabled and monitored. DB queries optimized and indexed; N+1 checks in CI. Responses cached where safe; queues handle slow work.

Keys & TTLs Namespaced keys: app:domain:entity:id. Set TTLs per data volatility; use jitter to avoid thundering expirations. Version keys on schema changes to prevent stale reads. Stampede protection Use SETNX/lock around rebuild; short lock TTL with fallback. Serve stale-while-revalidate: return cached value, refresh asynchronously. Serialization & size Prefer JSON with bounded fields; compress only large blobs. Avoid massive lists/hashes; paginate or split keys. Operations Monitor hit rate, command latency, memory, evictions. Use connection pooling; set timeouts and retries with backoff. Cluster/replica for HA; read from replicas if consistency allows. Checklist Keys versioned; TTLs with jitter. Stampede controls in place. Metrics for hit/miss/latency/evictions; alerts configured.

Redis is powerful for caching. Here are effective caching strategies. Cache-Aside Pattern async function getUser(id) { // Check cache let user = await redis.get(`user:${id}`); if (user) { return JSON.parse(user); } // Cache miss - fetch from DB user = await db.query('SELECT * FROM users WHERE id = ?', [id]); // Store in cache await redis.setex(`user:${id}`, 3600, JSON.stringify(user)); return user; } Write-Through Pattern async function updateUser(id, data) { // Update database const user = await db.update('users', id, data); // Update cache await redis.setex(`user:${id}`, 3600, JSON.stringify(user)); return user; } Cache Invalidation async function deleteUser(id) { // Delete from database await db.delete('users', id); // Invalidate cache await redis.del(`user:${id}`); } Best Practices Set appropriate TTL Handle cache misses Invalidate properly Monitor cache hit rate Use consistent key patterns Conclusion Implement effective Redis caching strategies! 🔴