4 Ways To Fetch Data in React

In this video I will go over 4 ways you can fetch data in react from most basic to more advanced. I will also introduce the topic of best practices while fetching data.

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

* React Fetch Data*

00:00 | Intro
00:52 | Fetch API
03:43 | Axios
06:27 | useSWR
14:30 | React Query Library

#reactjs #data

[behold_a_son]

2:49 The result is not JSON, here's a quote from mdn on Response.json():
"Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object."
So correct me if I am wrong: the result obtained after the fetch promise has fulfilled, is already in JSON. When you do res.json(), it returns another promise that converts JSON into a JavaScript Object, so you can for example use the dot operator on the data when the returned promise of res.json() is fulfilled.

We all are learning! Don't let a mistake like that haunt you Pedro! You've been a great help to me! :)

[madalinavasile]

Hi! I just want to say a big thank you! For my graduation project/bachelor thesis I decided to make an app using React. It was a totally new technology for me and the first app I ever made. Finding your tutorials and videos was been really helpful, they're really easy to follow and your explications and examples are great! I'll have to make sure to go back to every video I watched and leave a like. Good job and hopefully more people will find your channel!

[_boza]

I heard and use some basics of React Query but you mentioned many things that I did not know and they are very useful! Thank you! :)

[fandross_]

E ai mano, tu eh o melhor professor que eu ja tive, valeu ai!

[universecode]

This is a very important step guys … good video Pedro 👏🏻

[Moon-liki]

boa pedrão, teus videos sempre me ajuda demais! Nem sabia q vc era brasileiro, seu inglês é muito bom

[arsnakehert]

Your channel is a treasure of knowledge, man

[sethheinzman]

You can also use SWR config to set a fetcher and set the suspense for all of the useSWR so you can just include the url and nothing else. That’s how this book taught it but I kind of like having the option to change the fetcher.

[ioana]

Thank you so much, Pedro, for the video. I have been watching many videos, but yours are by far more helpful. Would you be able to do a tutorial on Nivo charts API integration? This topic is poorly documented and it would help tremendously to have your guidance. I am pretty sure I am not the only one searching for it 😅. Many thanks 😊

[himanshugaikwad]

Nice video like always. Thank you very much. Can u make a video on auto image slider in react js? i would love to learn that from u

[nomapos]

Hello, please we need some react native content ....
Even if it's only notes ...
Please share ...🙌🙌

[DeepLook]

Thank . And how many ways we have to insert record to database like mysql. Thank u again for this video

[tech]

Cool vid. Would love to see something like using react query with firebase, if that's something you find interesting.

[sujoykrhaldar]

hi
Can you make a series on how to use swr client side fetching in nextjs and react query as well.

[Ellenox]

Great video thanks ! What's the theme ?

[adarsh-chakraborty]

I wish you showed stale option in react-Query. Anyways nice video!!

[EduardKaresli]

There is also RTK Query, from Redux Toolkit.

[atandauthman]

I can see you have the copilot extension, I'm sort of having issues getting my own to work I don't know what I'm doing wrong but it shows the icon as cancelled every time

[diegounanue]

More videos about how to structure a large project with react query :)

[filipevalentegomes]

I’m surprised you didn’t mention rtk query, that’s another one, lots of people love using. Still great video