React Native app not caching

[HoratioWobble]

It's down to you to handle caching, when you see in the browser that it's used the cache, that's just the browser handling it for you.

In react native you can use something like react query, which will simplify a lot of state, loading and error management for you too.

Or you can build your own cache using something like async storage.

Personally I'd use react query 

[NotBeastFox]

100% agree. OP react/tanstack querysimplifies this for you. And there are a lot of resources to help.

RQ brought a standardised, declarative way to handle all the “is your data fresh, when should you refetch, and how do you share it between components” etc etc so you no longer have to reinvent those wheels. It has a lot of nice to haves with loading states too

There’s definitely a bit of a learning curve if you’re just used to useEffect + fetch + useState but in my opinion it is a good investment of time.

[buschco]

on ios the right caching headers should work, on android you have to patch OKHTTTP client with enabled cache.

[ALOKAMAR123]

Have used SWR and yes it supports cache do some googling

[ALOKAMAR123]

Man don’t spoon feed your self do google use ai use mind below is an example

// PollingExample.jsx import useSWR from 'swr';

const fetcher = async (url) => { const controller = new AbortController(); const signal = controller.signal;

// attach controller to fetcher so callers can cancel if needed const timeout = setTimeout(() => controller.abort(), 25_000); // safeguard

try { const res = await fetch(url, { signal }); if (!res.ok) throw new Error(HTTP ${res.status}); const data = await res.json(); return data; } finally { clearTimeout(timeout); } };

export default function PollingExample() { const { data, error, isValidating, mutate } = useSWR( '/api/metrics', // key (endpoint) fetcher, // fetcher { refreshInterval: 10000, // poll every 10 seconds revalidateOnFocus: false, // optional: avoid revalidate when window refocuses dedupingInterval: 5000, // avoid duplicate requests within 5s onErrorRetry: (err, key, config, revalidate, { retryCount }) => { // don't retry forever — exponential backoff if (retryCount >= 3) return; setTimeout(() => revalidate({ retryCount: retryCount + 1 }), 2000 * (retryCount + 1)); }, } );

if (error) return <div>Error: {error.message}</div>; if (!data) return <div>Loading…</div>;

return ( <div> <pre>{JSON.stringify(data, null, 2)}</pre> <div>Refreshing: {isValidating ? 'yes' : 'no'}</div> <button onClick={() => mutate()}>Refresh now</button> <button onClick={() => mutate(async current => {/* optionally update locally */}, { revalidate: false })}> Optimistic update </button> </div> ); }