AJAX and APIs
How can I make an AJAX call?
You can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX, and the browser built-in window.fetch.
Where in the component lifecycle should I make an AJAX call?
You should populate data with AJAX calls in useEffect calls. This is so you can use an appropriate set function from a useState call to update your component when the data is retrieved.
Example: Using AJAX results to set local state
The component below demonstrates how to make an AJAX call in useEffect to populate local component state.
The example API returns a JSON object like this:
{
"items": [
{ "id": 1, "name": "Apples", "price": "$2" },
{ "id": 2, "name": "Peaches", "price": "$5" }
]
}function MyComponent() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true)
setItems(result.items)
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
setIsLoaded(true)
setError(error)
}
)
// Note: the empty deps array [] means
// this useEffect will run once
}, [])
if (error) {
return <div>Error: {error.message}</div>
} else if (!isLoaded) {
return <div>Loading...</div>
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
)
}
}