Why local data enables offline experience in React Native - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does storing data locally help offline use?

Imagine you want to use a mobile app without internet. Why does saving data on your device help?

A Because the app can access saved data anytime without needing internet

B Because local data makes the app load slower

C Because local data requires constant internet to update

D Because local data deletes all online data

💡 Hint

Think about what happens when you have no internet connection.

Local data means the app keeps a copy of information on your device. So even without internet, the app can show you that saved info.

❓ ui_behavior

intermediate

What happens to app behavior when local data is used offline?

If an app uses local data storage, what will the user see when offline?

A The app crashes immediately

B The app shows previously saved content without errors

C The app shows a blank screen with no content

D The app asks for internet to continue

💡 Hint

Think about how local data helps the app behave without internet.

Using local data means the app can display saved content even when offline, so users still see useful info.

❓ lifecycle

advanced

When should an app update local data for offline use?

To keep offline data useful, when should the app update its local storage?

A When the app detects an internet connection and new data is available

B Never update local data after first download

C Only when the user closes the app

D Only when the device restarts

💡 Hint

Think about how the app stays current with new info.

The app should update local data whenever it can connect to the internet and new info exists, so offline data stays fresh.

❓ navigation

advanced

How does local data affect app navigation offline?

If an app uses local data, what happens when a user navigates to a screen needing data while offline?

A The screen shows a loading spinner forever

B The screen shows an error message and no content

C The app closes unexpectedly

D The screen loads using saved local data without errors

💡 Hint

Consider how local data supports screen content without internet.

Local data allows screens to load content from device storage, so navigation works smoothly offline.

🔧 Debug

expert

Why does this offline app fail to show saved data?

An app saves data locally but shows blank screens offline. What is a likely cause?

React Native

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(json => {
      setData(json);
      AsyncStorage.setItem('localData', JSON.stringify(json));
    });
}, []);

useEffect(() => {
  AsyncStorage.getItem('localData').then(saved => {
    if (saved) setData(JSON.parse(saved));
  });
}, []);

A The setData function is missing and data never updates

B The AsyncStorage methods are called incorrectly and cause errors

C The fetch runs after the local data load, overwriting it with empty data when offline

D The app does not request internet permission

💡 Hint

Think about the order of data loading and fetching when offline.

The fetch tries to get online data after loading local data. When offline, fetch fails and may overwrite local data with empty or undefined, causing blank screens.