API integration
- React Native course
- Intermediate
- Lesson 114/116
- 6 min
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.
Practice 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)).
Starter code
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([]);
// Load tasks from API with useEffect
return (
<TasksContext.Provider value={{ tasks, setTasks }}>
<Text>Tasks</Text>
</TasksContext.Provider>
);
}Sample 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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each flow step to its role
| Term | Meaning |
|---|---|
useEffect |
Runs at mount |
fetch |
Sends API request |
.json() |
Converts to JSON |
setTasks |
Writes to state |
2 fetch call
const data = await ____(url);const data = await fetch(url);Explanation: fetch pulls data from a URL.
3 What format is the data from an API?
fetch(url).then((res) => res.json());- CSS
- JSON Correct answer
- XML
- HTML
Explanation: API data comes in JSON format.