How do I cache AI responses in React?

Store answers in a cache keyed by the prompt. Before calling the model, check the cache; on a hit, return it instantly. Libraries like React Query and SWR do this for you, including in-flight deduplication and configurable freshness.

What is request deduplication?

If two components ask the same question at once, dedup shares a single request instead of firing two. The cache tracks the inFlight promise by key and hands the same result to both callers, halving cost and load.

Should I persist the cache?

For stable answers, yes. A module-level Map , localStorage, or the query client keeps results across component mounts and page reloads, so a returning user gets an instant answer with no new tokens spent.

Build / Code / React

Caching AI Responses

Skip repeat AI calls by caching answers by prompt and deduplicating requests already in flight.

TL;DR

Key each answer by its prompt and reuse the result.
Deduplicate requests already inFlight for the same key.
Persist a response cache across renders and sessions.

Jump to section

Cache by Prompt Key
Deduplicate In-Flight
Use React Query
Persist Results
Tips
Warnings
In Practice
FAQ

Cache by Prompt Key

Build a Key

Normalize the prompt into a stable key.

const key = prompt.trim().toLowerCase();

Check First

Return a cached answer before calling.

if (cache.has(key)) return cache.get(key);

Store the Answer

Save the result for next time.

cache.set(key, text);

Deduplicate In-Flight

Track Promises

Cache the pending promise, not just the value.

if (inFlight.has(key))
  return inFlight.get(key);

Share One Call

Both callers await the same request.

const p = callModel(prompt);
inFlight.set(key, p);

Clean Up

Drop the promise once it settles.

p.finally(() => inFlight.delete(key));

Use React Query

useQuery

Cache and dedupe with a single hook.

const { data } = useQuery({
  queryKey: ['ai', prompt],
  queryFn: () => ask(prompt),
});

Stable Key

The queryKey identifies the cached entry.

queryKey: ['ai', prompt]

Set Freshness

staleTime keeps answers cached longer.

staleTime: 60_000

Persist Results

Module Cache

A Map outside components survives remounts.

const cache = new Map<string, string>();

Local Storage

Persist stable answers across reloads.

localStorage.setItem(key, text);

Server Cache

Cache in the route to share across users.

// route-level cache = 1 call for all

Tips

Reach for React Query or SWR; they cache by key, dedupe in-flight requests, and return the cached answer instantly on repeat.
Normalize the cacheKey by trimming, lowercasing, and sorting options so equivalent prompts hit one entry instead of missing.

Warnings

Do not cache personalized or fast-changing answers forever; set a staleTime so results refresh when they should.
A cache in a component's state dies on unmount; use a module store, React Query, or storage to keep it across mounts.

In Practice

An ask helper that returns cached answers and shares in-flight requests for the same prompt.

A module-level Map holds answers keyed by the normalized prompt.
A cache hit returns instantly with no network call.
An in-flight map shares one request among duplicate callers.
The promise is removed from in-flight once it resolves.

const cache = new Map<string, string>();
const inFlight = new Map<string, Promise<string>>();

async function ask(prompt: string) {
  const key = prompt.trim().toLowerCase();
  if (cache.has(key)) return cache.get(key)!;
  if (inFlight.has(key)) return inFlight.get(key)!;
  const p = fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ prompt }),
  })
    .then((r) => r.json())
    .then((d) => {
      cache.set(key, d.text);
      return d.text as string;
    })
    .finally(() => inFlight.delete(key));
  inFlight.set(key, p);
  return p;
}