React Query Crash Course

Подписаться 72 тыс.

Просмотров 64 тыс.

50% 1

This crash course will teach you all about React Query
Second Channel:
/ @laiture123
GitHub Repo:
github.com/harblaith7/React-Q...
Timeline:
0:00 - Introduction
2:24 - Fetching without React Query
11:50 - Refactor to use React Query
23:48 - Pagination

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@aznjokeryou 2 года назад

Nice video, thank you! Just want to point out that they reason why even with 3G throttling the Next button didn't get disabled is because you put "&&" instead of "||". Since data.info.next for all but one (the last page) is not null, !data.info.next would evaluate to false, which means disabled is also false. Timestamp: 36:30 Otherwise, great job!

@joshuaebhoria8046 Год назад

another way i got to see the effect of this was to remove it from display when true. with the 3G throttling it was wholesome😉 {!isPreviousData && ( setPage((prev) => prev + 1)} > Next )}

@atvonguyentien5726 Год назад

@@joshuaebhoria8046 sorry, what does the ?. mean in your code Ah so if not null then you will access its prop, right?

@adegboyegaoyewole7249 4 месяца назад

@@atvonguyentien5726 It's used to check undefined

@DioArsya 2 года назад

wow black on a very dark gray bg is the 2022 trends I guess

@vijaynyaya6603 2 года назад

Thanks, If I hadn't seen this today, then I'd be implementing my own React Query to cache paginated responses in the next few days. Saved me a lot of work.

@canerkuru3046 2 года назад

Laith you are absolutely the best teacher ever! I learned so much from you and still keep learning every day. Thank you so much for your time and effort. Can't wait to see more React stuff on your channel!

@danielmoralesgonzalez4908 2 года назад

Awesome, thanks for the tutorial. Hoping for a 2nd part covering mutations!

@scvkurt03 2 года назад

Also looking forward to the 2th part.

@johnyepthomi892 Год назад

Holy moly, straight to the detail and explained clearly and very concise. Thank you.

@dzulfiqarzaky5557 2 года назад

laith upload i liek!! man, your teaching helped me so much these last month. i hope you will reach millions subs!!

@amsadeeq 2 года назад

Best Tutorial on React Query that covered critical techniques. Thank you sir

@saurabrakshit405 Год назад

😎Ohhh.... what a easy way of delivering complex thing. 🤩😇

@ytsports2686 Год назад

First time got o/p in RU-vid react videos tq u so much

@jakobo5521 Год назад

Thank you so much for creating this tutorial. It helped me a lot in case of better understanding of React Query. Thanks once again. Looking forward for more!

@codingwithdidem Год назад

Thank you Laith, you literally saved my life!

@hyperreal1237 2 года назад

고맙습니다. 항상 큰 도움이 되고있어요!

@CatMeowMeow 2 года назад

Wow react query sure is a lot easier then implementing my own caching system lol. Thanks for the tutorial!

@ayoubkh5282 Год назад

best react query lesson at all , very clear

@XxDarkCinisterxX 2 года назад

I didn't know this API existed! Pretty excited to integrate this into discord!

@yanivcode9724 2 года назад

I actually had to speed down to 0.25 to notice the loading state which was very weird. Very good video well done.

@upanisad 2 года назад

Thank you for this upload. It helped me to use react-query .

@NitinRanganath 2 года назад

This library has single-handedly made my developer experience so much better. Happy to see you covering react-query on your channel.

@lardosian 2 года назад

Do you use another state manager with it, as I heard it's not supposed to be a replacement for something like Redux but specialize in asynchronous api calls, thanks.

@ckh8217 2 года назад

@@lardosian React Query is for server state, for UI state you can use Context, Redux etc...

@lardosian 2 года назад

@@ckh8217 Yes that's what I was getting at, so an app would need 2 providers then.

@bishnudas3562 2 года назад

Wanna know how to use react query with redux-toolkit

@agontprevarator5214 2 года назад

@@bishnudas3562 By using the inbuilt RTK Query

@yousafwazir286 2 года назад

Amazing learnt so much

@joviruona793 Год назад

Very nice and concise

@khethelondhlala4347 Год назад

Really Amazing 🔥

@ahsaanali4512 Год назад

Love your content👍👍👍

@matiasbacelar8662 2 года назад

Awesome !

@laptop12358 2 года назад

nicely explained

@arupde6320 2 года назад

good keep uploading

@arno.claude 2 года назад

Thank you!

@imranbaitham6712 2 года назад

it"s Help full Thanks

@gerarduab9960 2 года назад

Hi , a little doubt, when I use react query (useQuery) with the same id, in different components, every time the component is mounted it re-fetches the data without using the cache. Do you know what the problem is if you want to get the same data in different components without calling the server again? Greetings.

@suatbayrak2703 2 года назад

great tutorial, covering critical parts like query strings and pagination, thank you. I have a question, I couldnt fully understand the purpose of isPreviousData. Is it just for user to not let press previous button before the data is fetched ? to prevent our actual data to be messed up?

@laithacademy 2 года назад

By saying that we want to keep the previousData until we fetch the new ones, we have to first check if we are in the previous data state (because requests take time). If that is the case, we want to disable the next button because we don't want them to press it again in the middle of a fetch. Therefore we use the isPreviousData property to check this

@designcoded7585 2 года назад

@@laithacademy sir gith hub actions and ci cd crash course if possible sir , really thanks for your tutorials it helps alot for starting up with new technologies

@mohamedyoussef8835 Год назад

Awesome video ++++++ 😃

@baz5719 Год назад

I can never quite get auto import to work as well as I see in these excellent videos 😅

@mohamedyoussef1311 Год назад

Awesome +++++++++++ 😀

@abubakar-emumba 2 года назад

Hey laith thanks for the videos, Please make a video on SWR

@msthetechguy 2 года назад

Amazing video and use || instead of && in last duration of the video in button

@RahulRajBodraBAENGSEM Год назад

It's easier than it looks. I found learning soft design (like setups - I use SERUM) much more scary but it's doable, you just gotta be

@igorr4682 2 года назад

Now you have to do SWR so next.js people don't feel left out,,, LOL

@Runwithmeee 5 месяцев назад

good

@AngelHdzMultimedia Год назад

Was struggling to get the request working, status always went from loading to error. Reading the Github of react-query, I found out useQuery requires an array as first argument and not a string. Maybe it changed along the way... I'm using v4.0.0.

@cs7a30piyushjoshi2 Год назад

You should make playlists.

@markjaylunas105 Год назад

Clicked the video taught it was from traversy media 😅. But still great content overall

@d3vastatlon 2 года назад

@10:19 you say that's a common issue, could you explain how to fix that issue?

@nabinsaud4688 2 года назад

From where you edit your videos

@janekozga5144 Год назад

For the fetching without React/Tanstack Query why not add a try/catch with loading/error state? This would really show how much work this is.

@mr.random8447 Год назад

This

@kimbapslayer1995 Год назад

Forgot important feature. Which is using cached data from another component!

@froggerabc Год назад

Why does, with the introduction of every 'new' or 'on trend' library/code style etc, every tutorial video like this come with the 'it was a bit of a hassle doing it this way' speech when it made it 10x better than what we had before that. So weird.