Stale UI in React apps typically stems from multiple caching layers rather than random bugs. The article identifies five common caching sources: React Query cache, Next.js fetch caching, browser HTTP cache, CDN/hosting cache, and service worker cache, plus one non-cache trap involving duplicated React state. Each layer is explained with symptoms, debugging steps, and solutions. A 10-second diagnostic guide helps identify which layer is serving stale data by checking network requests and response freshness. Prevention focuses on setting caching intentionally based on content type, with user-specific pages defaulting to fresh data and public pages using revalidation strategies.
Table of contents
Why it MattersTable of ContentsThe Mental ModelNon-Cache CauseCache 1: React Query CacheCache 2: Next.js fetch() CachingCache 3: Browser HTTP Cache (a Saved Copy in Your Browser)Cache 4: CDN/Hosting CacheCache 5: Service Worker Cache (Only if Your Site is a PWA)10-Second Debug GuidePrevention: Set Caching IntentionallyRecap8.3K Impressions