Offline cache
- React Native course
- Advanced
- Lesson 32/83
- 5 min
Learn the offline cache strategy.
Offline cache
An offline cache keeps network data in local storage; when the user is offline it shows this data. You store the data as key-value with AsyncStorage; when the network request succeeds you both show the data on the screen and write it to the cache.
The flow is: first read the cache (fast display), then make the network request. When the network succeeds you write the new data to the cache and update the screen; when it fails you keep showing the old data in the cache. This pattern ensures the user always sees some content. The cache can also be limited with a time-to-live (TTL); very old data is reloaded.
Cache flow
An offline cache flow consists of these steps: first read the data from the cache and show it on the screen immediately. Then try the network request; if it succeeds write the new data both to the cache and update the screen. If the network fails keep the data in the cache.
This flow is also known as 'stale-while-revalidate'; the user first sees the old data, then it updates if new data arrives. When writing to AsyncStorage the value must be a string; to store an object you convert it to a string with JSON.stringify. When reading you convert it back to an object with JSON.parse. This conversion is the foundation of the cache flow.
Practice Write the cache flow
Complete the fetchWithCache function. First read the cache with const cached = await AsyncStorage.getItem('user_data'). Show it with if (cached) setData(JSON.parse(cached)). Then try the network with const fresh = await fetchUser(). On success write to cache with await AsyncStorage.setItem('user_data', JSON.stringify(fresh)) and update with setData(fresh). fetchUser and setData are passed as parameters.
Starter code
import AsyncStorage from '@react-native-async-storage/async-storage';
export async function fetchWithCache(fetchUser, setData) {
// read cache, make network request, update cache
}Sample solution
const cached = await AsyncStorage.getItem('user_data');
if (cached) setData(JSON.parse(cached));
try {
const fresh = await fetchUser();
await AsyncStorage.setItem('user_data', JSON.stringify(fresh));
setData(fresh);
} catch (e) {
// network error; cache is preserved
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the cache read function
const cached = await AsyncStorage.____('user_data');const cached = await AsyncStorage.getItem('user_data');Explanation: getItem reads a value from the cache.
2 What is used when writing an object to AsyncStorage?
await AsyncStorage.setItem('key', ???(data))- JSON.parse
- toString
- JSON.stringify Correct answer
- String
Explanation: JSON.stringify converts an object to a string.
3 Match each step to its purpose
| Term | Meaning |
|---|---|
getItem |
Reads cache |
setItem |
Writes to cache |
JSON.stringify |
Converts to string |
JSON.parse |
Converts to object |