https://github.com/soyelmoreno/react-fetching-data
Following along with tutorial: Fetching Data in React
https://github.com/soyelmoreno/react-fetching-data
abort-controller data-fetching react tailwindcss typescript
Last synced: 3 months ago
JSON representation
Following along with tutorial: Fetching Data in React
- Host: GitHub
- URL: https://github.com/soyelmoreno/react-fetching-data
- Owner: soyelmoreno
- Created: 2025-08-03T01:06:58.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-03T18:36:53.000Z (11 months ago)
- Last Synced: 2025-08-14T09:29:04.517Z (11 months ago)
- Topics: abort-controller, data-fetching, react, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 50.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fetching Data in React
Following along with these tutorials:
[Fetching Data in React - Complete
Tutorial](https://www.youtube.com/watch?v=00lxm_doFYw)
[Modern Data Fetching in React (Complete
Guide)](https://www.youtube.com/watch?v=MBlZ8Wzkbi4)
by Cosden Solutions
## Approach 1: Manual
First there is a "manual" data fetching example, i.e., we handle these things
ourselves:
- fetching
- isLoading
- error
- abort controller
A library like React Query will handle all of this for us. The purpose of this
exercise is to gain familiarity with the low-level operations so we can
understand what React Query is doing for us.
The big new thing here is the [JavaScript AbortController
API](https://developer.mozilla.org/en-US/docs/Web/API/AbortController). It
provides a mechanism to abort ongoing asynchronous operations such as network
requests. This lets us prevent race conditions.
For example, if the user loads posts, then quickly loads the next page of posts,
and the first request gets delayed, and the second page loads quickly...we don't
want the posts loaded by the second request to be clobbered when the first
request finally comes back. So for every request, we can first abort any
previous request.
## Approach 2: React Query
Then there is a "modern" data fetching example. We use React Query to handle all
these things for us.
## Approach 3: Server Component
There is also a "server" example, using a React Server Component wrapped in a
``. But I couldn't get it because I don't have a server component
framework running (like Next.js).