Fetch Data from API in React JS | Learn ReactJS

Learn how to fetch data from an API in React JS as you follow along with this React tutorial. You will learn how to use async and await inside the React useEffect hook and display the data you fetch from the Rest API on the screen.

🚀 This lesson is part of a Learn React tutorial series playlist:

Fetch Data from API in React JS | Learn ReactJS

(00:00) Intro
(00:05) Tutorial Set Up
(01:57) Switching from localStorage to REST API
(04:48) Using Async Await with useEffect hook
(05:45) Creating the fetch function
(09:31) Not all fetch errors go to the catch block
(10:59) Catching fetch error responses
(14:10) Displaying errors in JSX
(18:47) Simulating a slow REST API response
(20:04) Track loading state
(21:15) Displaying a loading message in JSX
(22:52) The complete fetch function inside useEffect

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about how to fetch data from an API in React helpful? If so, please share. Let me know your thoughts in the comments.

#react #fetch #data

[stevemcqueen]

Thanks Dave, most other videos do not show how to track the loading state or error handling. Good to see you are a professional!

[abdulazeez.]

It's really unfortunate that I discovered your channel just recently. I have been following a 40-hour React course on Udemy, your content is vastly superior than that course. I really like how you teach real life scenarios rather than just writing the bare minimum code.
Really appreciate all the efforts 👍

[zakariachajia]

I'm following the whole react playlist now I'm on video 13 I'm seeing alot of progress I hope i can finish this playlist as fast as possible to sharpen my skills Thank you man your tutorials are 100% effecient no waste of time no confusion straigh to the point you're the best man

[Pareshbpatel]

A very thorough illustration of the use of the fetch API in react. Thanks, Dave

{2022-10-19}

[shitaladkar]

Hey Dave, I am from India . I have learned a lot from your channel and I always follow your methods to solve my problems, really you are great. Thank you very much .

[abdallahazouz]

everyday I gain more experience by virtue of you, great thanks.

[harag]

Great video, thanks for this. Q) Do you later on go into moving the fetch items into a separate module - A data access layer so to speak? as you might want to call the fetchItems from several different components if it was a larger app, and also make the isLoading / fetchError more generic. All great for a small app like this.

[deepaksingh]

Superb Dev you are doing a great job Love from India ❤

[viditgoel]

Hi, I noticed in this tutorial if we get an error in the fetch request after the list of items is loaded successfully initially our footer shows the number of list items from the items state as it is populated from the earlier successful fetch request so a simple fix that I did for this is that whenever we catch an error and set fetchError in the catch statement, I set state of items to an empty array setItems([ ]) so now if there's any error in the fetch request our footer element does not show the count of elements in it.

[culturapoliticaycomputador]

Amaizing tutorial how to handle erros in useEffect😊

[vikaschauhan]

Excellent tutorial, please make a series of hook

[rootMedia]

Hey Dave, Please help me @ how to fetch data from Elasticssearch and display it on React table. I have already Created React Table, and I have data on Elasticsearch. but I don't know how to call API on React

[BrainNotUsed]

Excellent tutorial as always.
Slowly catching up.
I have a question in regards to using && operator @ 18:00. Is there any particular reason in this case we are not using a ternary operator? { fetchError ? <p>displayError</p> : <Content /> }

[Bayans]

thanks Dave for this amazing tutorial, just a question is there a difference between new bash and new power shell terminal for this tutorial

[bjornhellgate]

Hey Dave, when I use "npx json-server -p 3500 -w data/db.json" I get the error: TypeError Unknown option '-w'. To specify a positional argument starting with a '-', place it at the end of the command after '--', as in '-- "-w". Has anything changed since this tutorial or am i simply missing a step? Thanks for all the great content!

[cruquen]

great video Dave. Thank you. I do get a CORS error. my backend is running on 5000 and the frontend on 3000. I can see you are on 3500 and 3000 respectively with no issue?

[trinadhkamma]

Instead of (async () => await fetchItems())();
can we directly call the function as fetchItems() ??
If so, then what is the difference between above two invoking methods.
Can you please explain.

[skillkrio]

Dave in a rush of finding jobs . After completing react can i start learning node directly without learning redux. I had planned to learn it later. Does your node series uses redux anywhere?

[jiweihe]

Somehow useEffect({}, []) with an empty array was always runs twice when I reload the page. Only fixed this after removing the react strict mode..

[lamhoang]

hi Dave and everyone. thanks for the interesting react series. I actually ran into a problem when sending requests to the json server and the console just showed me the error "WebSocket connection to 'ws://localhost:3000/ws' failed: " when I log the listItems at 7:37. I've been looking up on google chrome just to fix it, but I'm still stuck on this error tho. could anyone help me out how to handle this problem? thanks