Loading and error states in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this React Native component display during data loading?

Consider this React Native component that fetches data and shows a loading spinner while waiting. What will the user see on the screen before the data loads?

React Native

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

export default function DataLoader() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData('Hello!');
      setLoading(false);
    }, 3000);
  }, []);

  if (loading) {
    return <ActivityIndicator accessibilityLabel="Loading indicator" size="large" />;
  }

  return <Text>{data}</Text>;
}

A A large spinning loader is shown for 3 seconds, then 'Hello!' text appears.

B The text 'Hello!' appears immediately, then disappears after 3 seconds.

C Nothing is shown until the data loads, then 'Hello!' appears.

D An error message is shown because the data is null initially.

💡 Hint

Look at the loading state and what the component returns when loading is true.

The component starts with loading = true, so it returns the ActivityIndicator spinner. After 3 seconds, loading becomes false and data is set, so the text 'Hello!' is shown.

❓ ui_behavior

intermediate

Which option correctly shows an error message when data fetching fails?

This React Native component tries to fetch data but may fail. Which option correctly displays an error message if the fetch fails?

React Native

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

export default function FetchWithError() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setError('Network error');
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" />;
  }

  if (error) {
    return <Text accessibilityRole="alert">Error: {error}</Text>;
  }

  return <Text>{data}</Text>;
}

A Shows spinner forever because error is ignored.

B Shows 'Error: Network error' immediately, then spinner after 2 seconds.

C Shows blank screen because data is null.

D Shows a spinner for 2 seconds, then displays 'Error: Network error' text.

💡 Hint

Check the order of the if statements and when loading and error change.

The component shows a spinner while loading is true. After 2 seconds, loading becomes false and error is set, so it shows the error message.

❓ lifecycle

advanced

What happens if the component unmounts before data loads?

In this React Native component, what issue can occur if the component unmounts before the data finishes loading?

React Native

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

export default function UnmountIssue() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      setData('Loaded');
    }, 5000);

    return () => clearTimeout(timer);
  }, []);

  if (!data) {
    return <Text>Loading...</Text>;
  }

  return <Text>{data}</Text>;
}

A A memory leak occurs because the timer is not cleared.

B No issue because the timer is cleared on unmount.

C The app crashes because setData is called after unmount.

D The component shows 'Loading...' forever.

💡 Hint

Look at the cleanup function returned by useEffect.

The cleanup function clears the timer when the component unmounts, preventing setData from running after unmount and avoiding memory leaks.

📝 Syntax

advanced

What error does this code produce when loading state is missing?

What error will this React Native component produce when it tries to render?

React Native

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

export default function MissingLoading() {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData('Done');
    }, 1000);
  }, []);

  if (loading) {
    return <Text>Loading...</Text>;
  }

  return <Text>{data}</Text>;
}

A No error, shows 'Loading...' then 'Done'

B TypeError: Cannot read property 'loading' of undefined

C ReferenceError: loading is not defined

D SyntaxError: Unexpected identifier

💡 Hint

Check if loading is declared anywhere in the component.

The variable loading is used but never declared, causing a ReferenceError at runtime.

🧠 Conceptual

expert

Why is it important to show both loading and error states in mobile apps?

Choose the best explanation for why mobile apps should show clear loading and error states to users.

A It improves user experience by informing users about app status and prevents confusion.

B It is only needed for debugging and has no impact on user experience.

C It slows down the app but looks nicer visually.

D It is required by app stores to pass submission.

💡 Hint

Think about how users feel when waiting or when something goes wrong.

Showing loading and error states helps users understand what is happening, reducing frustration and improving trust in the app.