React Native · Mobile UI at native speed
How do you support offline use?
Short answer
Detect connectivity, serve cached data first, queue writes with an outbox, and reconcile conflicts explicitly when the device reconnects. Make offline a designed state rather than an error screen.
Mobile networks are unreliable, so offline is a normal state. A useful offline design has three parts: a local cache for reads, a durable queue for writes, and a policy for what happens when the queue syncs.
import NetInfo from "@react-native-community/netinfo";
export function watchConnectivity(onChange: (online: boolean) => void) {
return NetInfo.addEventListener((state) => {
const online = Boolean(state.isConnected && state.isInternetReachable !== false);
onChange(online);
});
}The pieces of an offline design
- A read cache with timestamps so the UI can show freshness
- An outbox table for pending mutations, keyed by a client-generated id
- Idempotency keys so a retried write does not duplicate
- A sync worker triggered on reconnect and app foreground
- A conflict policy: last write wins, server wins, or a merge with user-visible resolution
Optimistic updates make the app feel responsive, but they must be reversible. If a queued write fails permanently, the UI needs to roll back or mark the item as failed rather than showing a success that never happened.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1How do you queue writes while offline?
- 2What is an idempotency key and why does it matter?
- 3How do you resolve conflicting edits?
- 4Why is isConnected not enough to detect real connectivity?
Say it in the interview
I design offline as a first-class state: cached reads with timestamps, a durable outbox for writes, and a sync worker that runs on reconnect and foreground. Each queued mutation carries an idempotency key so retries do not duplicate. I also choose an explicit conflict policy per data type, because silently overwriting user edits is worse than showing a resolution step.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React Native mock interview and get scored feedback on depth, clarity and confidence.