Fetching Data with API

Let's think about it this way for a second

In React Native, the fetch API is available with the same syntax as in a web browser (it's built in) — if you want the API call to run only once, when the component mounts, put it inside useEffect(() => { ... }, []) (an empty dependency array). Combine two useState calls — a loading state (to show while waiting for data) and an error state (to show on failure) — and you get a complete data-fetching pattern.

Let's connect this to a real-world scenario

Wrapping the API call in try/catch matters for error handling — when there's no network connection (mobile users lose signal all the time), fetch can throw, and without a catch the app can crash. Show the ActivityIndicator component (a built-in loading spinner) while the loading state is true, and render the actual content once the data has arrived.

• useEffect + fetch = an API call when the component mounts
• Track two states — loading and error — with useState
• Handle network errors with try/catch

Code Example

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

export default function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => setPosts(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

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

  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

When the app opens, a loading spinner appears, and once the data arrives, the list of post titles is displayed in a FlatList.