Fetching Data in React - Full Guide

Published: 24 September 2023
on channel: Austin Davis
321
19

Curious how to correctly fetch data from an API in your React app? Look no farther! In this video, we're going to talk about EXACTLY how to pull data from an API (URL) using the JavaScript fetch library. You will learn how to fetch data in a way that is compatible with React.

Data fetching is an incredibly crucial part of almost every full-stack web application. Most apps need to fetch data from an external URL, or set up their own backend URL routing system to fetch data with a tool like Express JS. Either way, to access this data in the frontend (React code) you will need to follow the steps in this video.

The most critical part of fetching data with React is calling the fetch() API inside of a useEffect hook. By doing this, we can control the flow of data. The preferred method is to use async/await for that function, and call that function at the bottom of useEffect.

Timestamps:
0:00 - Fetching Data
0:27 - How to Fetch
2:42 - Async/await
5:00 - Loading Tracker
6:52 - Error Handling
9:39 - Fetch Abort

Hashtags:
#reactjs #webdevelopment #reacttutorial