Why API integration connects to backends in React Native - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do mobile apps use API integration to connect to backends?

Choose the best reason why mobile apps connect to backend servers using APIs.

A To fetch and send data securely between the app and server

B To make the app run faster without internet

C To store all app data only on the device

D To avoid using any server resources

💡 Hint

Think about how apps get updated information or save user data.

APIs allow apps to communicate with backend servers to get or send data securely. This is essential for dynamic content and user data management.

❓ ui_behavior

intermediate

What happens in the app UI when API data is loading?

When a React Native app calls an API to get data, what should the UI show while waiting for the response?

A Show blank screen with no feedback

B Crash the app to restart

C Show a loading spinner or message

D Immediately show old data without update

💡 Hint

Think about how apps keep users informed during slow network calls.

Showing a loading spinner or message informs users that data is being fetched, improving user experience.

❓ lifecycle

advanced

When should a React Native app call backend APIs?

Which lifecycle event is best to trigger an API call to fetch data when a screen appears?

A Inside the component constructor

B Inside useEffect hook with empty dependency array

C Inside a button click handler only

D Inside the render method directly

💡 Hint

Think about when the component is ready and mounted.

Using useEffect with an empty dependency array runs the API call once after the component mounts, ideal for initial data fetch.

❓ navigation

advanced

How to pass API data between screens in React Native?

You fetched user info from backend on Screen A. How do you pass this data to Screen B when navigating?

A Use console.log to share data

B Store data only in Screen A state without passing

C Reload Screen B without any data

D Pass data as parameters in navigation.navigate call

💡 Hint

Think about how navigation libraries pass info between screens.

Passing data as parameters in navigation.navigate allows Screen B to receive and use the API data.

🔧 Debug

expert

Why does this React Native API call fail with 'Network request failed'?

Given this code snippet, why does the fetch fail?

fetch('http://localhost:3000/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

A Mobile device cannot access localhost of development machine

B response.json() is not a function

C fetch requires POST method by default

D The URL is missing https:// prefix

💡 Hint

Think about what 'localhost' means on a mobile device.

On a mobile device, 'localhost' points to the device itself, not the development machine. The app cannot reach the backend server this way.