Stop 10 · API IntegrationTopics · 13/16

Caching

In short

If the user saw this list ten seconds ago, why make them wait for it again? Caching keeps recent answers handy so screens open instantly.

Storing previously fetched API responses so repeat requests for the same data are instant, instead of always hitting the network.

The jaadu runs a small grocery shop with bread and milk ready on the counter for a regular.

Think of it like this

The kirana uncle's memory

Your local kirana uncle knows you buy the same bread and milk every morning. He keeps it ready on the counter. If something changes, like a new brand, he checks again. A cache is that counter: quick answers, refreshed when they get old.

Watch it happen

Cache miss, then cache hit

Component

Query cache

API

["posts", 1]?

1/5Page 1 opens for the first time. The cache has nothing under this key.

The big ideas

What you need to know

Cache by key

Each piece of data gets a key, like ['posts', page]. Same key, same cached answer.

Stale data is still useful

Show the cached version right away, then refetch in the background. This pattern is called stale-while-revalidate.

Invalidate after changes

After you create or edit something, mark the related cache as old so it refetches.

Use a library

TanStack Query and SWR handle caching, refetching and deduping for you. Writing this by hand is painful.

See it in code

Walk through the code

tsx

1import { useQuery, useQueryClient } from "@tanstack/react-query";2 3function Posts({ page }: { page: number }) {4  const { data, isPending, error } = useQuery({5    queryKey: ["posts", page],6    queryFn: () => getPosts(page),7    staleTime: 60_000, // treat as fresh for 1 minute8  });9  // ...render10}11 12// After creating a post:13const queryClient = useQueryClient();14queryClient.invalidateQueries({ queryKey: ["posts"] });

1/3The key names the data. Same key, same cached answer.

Going back to page 1 is instant because ['posts', 1] is cached. invalidateQueries marks every posts query as old so it refetches.

Save yourself the pain

Common mistakes

Oops

Caching data forever and wondering why users see old prices.

Do this instead

Set a sensible staleTime and invalidate the cache after every create, update or delete.

Oops

Using the same cache key for different pages or filters.

Do this instead

Put everything the data depends on into the key, like ['products', category, page].

Your mission

Feel the cache

~30 min

Quick check

With stale-while-revalidate, what does the user see when revisiting a cached page?

Go deeper

1Notice how React Query caches queries by key automatically.
2Learn cache invalidation: when should cached data be considered stale?
3Compare a simple in-memory cache to a library's more sophisticated caching.