React Query for data fetching in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this React Query hook render?

Given this React Native component using React Query, what will be displayed when the data is loading?

React Native

import React from 'react';
import {Text, View} from 'react-native';
import {useQuery} from '@tanstack/react-query';

function fetchUser() {
  return new Promise(resolve => setTimeout(() => resolve({name: 'Anna'}), 1000));
}

export default function User() {
  const {data, isLoading} = useQuery(['user'], fetchUser);

  if (isLoading) return <Text>Loading user info...</Text>;

  return <Text>User: {data.name}</Text>;
}

A Text component showing 'User: undefined'

B Text component showing 'User: Anna' immediately

C Text component showing 'Loading user info...'

D Blank screen with no text

💡 Hint

Think about what happens before the data is fetched.

When the query is loading, isLoading is true, so the component returns the loading text first. Only after data is fetched does it show the user name.

❓ lifecycle

intermediate

When does React Query refetch data by default?

Consider a React Native app using React Query. When does React Query automatically refetch the data after the initial fetch?

A Only when the app is restarted

B Every 5 seconds regardless of user interaction

C Never after the first fetch unless manually triggered

D When the component mounts and when the app window regains focus

💡 Hint

Think about how React Query keeps data fresh when users return to the app.

React Query refetches data when the component mounts and when the app window regains focus to keep data fresh.

🔧 Debug

advanced

Why does this React Query hook cause an infinite loop?

Look at this React Native component using React Query. Why does it keep refetching endlessly?

React Native

import React from 'react';
import {Text} from 'react-native';
import {useQuery} from '@tanstack/react-query';

function fetchData() {
  return fetch('https://api.example.com/data').then(res => res.json());
}

export default function DataComponent() {
  const {data} = useQuery(['data'], fetchData);

  React.useEffect(() => {
    console.log('Data changed:', data);
  }, [data]);

  return <Text>{data ? data.title : 'Loading...'}</Text>;
}

A Because useEffect triggers a state update causing rerender

B Because the query key is a new array each render causing refetch

C Because the fetch URL is invalid causing retries

D Because fetchData is redefined inside the component causing query key to change

💡 Hint

Check what is passed as the query key and if it changes every render.

The query key ['data'] is a new array each render, so React Query thinks the key changed and refetches endlessly.

🧠 Conceptual

advanced

What is the purpose of React Query's staleTime option?

In React Query, what does setting the staleTime option do?

A It sets how long data stays fresh before React Query considers it stale and refetches

B It controls how often React Query retries failed requests

C It defines the timeout duration for fetch requests

D It disables caching of query data

💡 Hint

Think about how React Query decides when to refetch data automatically.

staleTime sets the duration data is considered fresh; during this time React Query won't refetch automatically.

📝 Syntax

expert

Which option correctly uses React Query's useMutation hook in React Native?

You want to send data to an API when a button is pressed. Which code snippet correctly uses useMutation?

React Native

import React from 'react';
import {Button, Text} from 'react-native';
import {useMutation} from '@tanstack/react-query';

function postData(newData) {
  return fetch('https://api.example.com/post', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(newData),
  }).then(res => res.json());
}

export default function PostButton() {
  const mutation = useMutation(postData);

  return (
    <>
      <Button title="Send" onPress={() => mutation.mutate({name: 'John'})} />
      {mutation.isLoading && <Text>Sending...</Text>}
      {mutation.isError && <Text>Error occurred</Text>}
      {mutation.isSuccess && <Text>Sent successfully</Text>}
    </>
  );
}

A Correctly uses useMutation with mutate called on button press and shows status texts

B Calls mutate immediately during render causing infinite loop

C Uses useMutation but calls mutate without arguments causing error

D Uses useMutation but does not handle loading or error states

💡 Hint

Check how mutate is called and how UI updates based on mutation state.

Option A correctly calls mutate inside onPress and shows loading, error, and success states.