Fetch API for GET requests in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this React Native component display after fetching data?

Consider this React Native component that fetches user data from an API and displays the user's name. What will be shown on the screen after the fetch completes successfully?

React Native

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

export default function UserName() {
  const [name, setName] = useState('Loading...');

  useEffect(() => {
    fetch('https://api.example.com/user/1')
      .then(response => response.json())
      .then(data => setName(data.name))
      .catch(() => setName('Error'));
  }, []);

  return (
    <View>
      <Text>{name}</Text>
    </View>
  );
}

A Displays 'Loading...' forever because useEffect is missing dependencies.

B Displays the user's name fetched from the API, e.g., 'Alice'.

C Displays 'Error' because fetch is not awaited.

D Displays nothing because the component returns null.

💡 Hint

Think about what happens after the fetch promise resolves and how state updates affect rendering.

The component starts with 'Loading...'. After fetch completes, it updates the state with the user's name, causing the component to re-render and display the name.

📝 Syntax

intermediate

Which fetch call syntax correctly performs a GET request?

You want to fetch data from 'https://api.example.com/items' using fetch in React Native. Which option correctly performs a GET request?

A fetch('https://api.example.com/items', { body: '{}' })

B fetch('https://api.example.com/items', { method: 'POST' })

C fetch('https://api.example.com/items', { method: 'GET' })

D fetch('https://api.example.com/items', { headers: { 'Content-Type': 'application/json' } })

💡 Hint

GET is the default method for fetch, but specifying it explicitly is correct.

Option C explicitly sets method to 'GET', which is correct. Option C uses POST, which is wrong. Option C adds a body, which is invalid for GET. Option C sets headers but does not specify method, so it defaults to GET but is incomplete for this question.

❓ lifecycle

advanced

When does the fetch call inside useEffect run in this React Native component?

Given this component, when will the fetch call execute?

React Native

import React, { useEffect } from 'react';
import { Text } from 'react-native';

export default function DataFetcher() {
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(console.log);
  }, []);

  return <Text>Fetching data...</Text>;
}

A Only once, right after the component mounts.

B Every time the component re-renders.

C Only when the component unmounts.

D Every time the user taps the screen.

💡 Hint

Look at the dependency array in useEffect.

An empty dependency array means the effect runs only once after the component mounts.

🔧 Debug

advanced

What error does this fetch code produce?

This React Native code tries to fetch JSON data but has a bug. What error will it cause?

React Native

fetch('https://api.example.com/data')
  .then(response => response.json)
  .then(data => console.log(data));

A ReferenceError: data is not defined

B SyntaxError: Unexpected token in JSON

C TypeError: response.json is not a function

D No error, logs the response.json function reference instead of the data

💡 Hint

Check how response.json is called.

response.json is a function and must be called with parentheses. Without (), it returns a reference to the function itself (not a promise from calling it), so the next .then receives the function and logs it. No error is thrown.

🧠 Conceptual

expert

Why should you handle errors when using fetch for GET requests in React Native?

Which is the best reason to handle errors when fetching data with fetch in React Native?

A Because network requests can fail due to no internet or server issues, and the app should respond gracefully.

B Because fetch automatically retries failed requests unless errors are handled.

C Because fetch throws a syntax error if the URL is a string.

D Because handling errors makes the fetch call faster.

💡 Hint

Think about real-life situations like losing internet connection.

Network requests can fail for many reasons. Handling errors lets the app show messages or fallback UI instead of crashing or freezing.