API integration

Write API integration with fetch.

Loading tasks from an API

In this lesson we will fill the tasks state with data from an API. Inside useEffect we call fetch, convert the returned JSON and write it to state with setTasks. This mimics the data flow of a real app.

Let the API URL be 'https://api.example.com/tasks'. The useEffect dependency array is []; this way it runs only once at mount. fetch returns a promise; we convert to JSON with .then((res) => res.json()) and write to state with .then((data) => setTasks(data)). This flow is the standard for data loading in React Native apps.

Loading with useEffect

useEffect is a hook that runs when the component mounts. If you give an empty dependency array [] it runs only once. Inside it you call fetch and load the data.

Example: useEffect(() => { fetch(url).then((res) => res.json()).then((data) => setTasks(data)); }, []). Here fetch returns a promise; with the .then chain we first convert to JSON, then write to state. Since the dependency array is empty, this flow runs only at mount; it does not fire again. You can add .catch for error handling; but this lesson focuses on the basic flow.

Exercise Add fetch with useEffect

Add useEffect to the existing App component. The dependency array is []. Inside it call fetch('https://api.example.com/tasks'); convert to JSON with .then((res) => res.json()); write to state with .then((data) => setTasks(data)).

Show example solution

import React, { useState, useEffect, createContext, useContext } from "react";
import { Text } from "react-native";

const TasksContext = createContext();

export function useTasks() {
  return useContext(TasksContext);
}

function App() {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    fetch("https://api.example.com/tasks")
      .then((res) => res.json())
      .then((data) => setTasks(data));
  }, []);
  return (
    <TasksContext.Provider value={{ tasks, setTasks }}>
      <Text>Tasks</Text>
    </TasksContext.Provider>
  );
}

Test yourself

Match each flow step to its role

useEffect

Runs at mount
fetch

Sends API request
.json()

Converts to JSON
setTasks

Writes to state

fetch call

const data = await ____(url);

Show answer

const data = await fetch(url);

What format is the data from an API?
```
fetch(url).then((res) => res.json());
```
- CSS
- JSON
- XML
- HTML
Show answer

JSON — API data comes in JSON format.

Next lesson: Navigation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies