The Better Way to do Loading States in React

No video

The Better Way to do Loading States in React

Рет қаралды 87,869

Күн бұрын

Out of the 1001 ways of handling loading states, optimistic updates are waaay up there for me. If you use them correctly, your users will have a MUCH smoother and faster experience browsing your app (if you had any users lol)
-- my links
Discord: / discord
GitHub: github.com/jos...

Пікірлер: 105

@user-nh3uw3rv6q 10 ай бұрын

Love your videos and consistent work ethic Josh. Amazing content. Wishing you the best!

@isipisiml4546 10 ай бұрын

that is why im planning to use react query because of its optimistic updates. thanks josh for giving an idea on how to properly do it

@joshtriedcoding 10 ай бұрын

appreciate you dude

@CanRau 10 ай бұрын

Finally got the React Query experience thanks to RakkasJS which currently has a more simpler implementation currently but will soonish ship React Query 5 🎉 which will kinda marry RQ & tRPC 🔥

@KellenProctor 10 ай бұрын

Literally perfect timing! Was just dealing with this issue for a checkbox that takes waaaay to long to update. Excellent content!

@mikelCold 10 ай бұрын

Love it. Always great to get a real take on a the experimental API instead of people just demoing the docs.

@ethioapps836 10 ай бұрын

josh i really like your contents man. keep up dude. you are leveling up my skills constantly with you engaging and interesting contents . big respect dude

@cloynelson2974 10 ай бұрын

Hmm, for me as a developer is a fun way to see info faster and to avoid skeletons. However, every time it happens to me as a user I feel more frustrated than in a case of a regular error. Likes case is only legit because it's insignificant enough for me to forget about an action before request gets fulfilled.

@clemensjanes8998 9 ай бұрын

Absolutely amazing video. Fast paced, but clear and understandable. Keep up the good work ❤

@SaadKhan-rl4qy 10 ай бұрын

Man just loved your content. I don't know how you know what I was looking for.

@BritainRitten 10 ай бұрын

Seems like a ton of work per data-fetching/mutating component. Maybe you can extract some of that behavior so it's easier to re-use across components - specifying only the things like "here's the data I want to fetch, and here's the type of mutation I'll be doing"

@gosnooky 10 ай бұрын

Abstractions like that can lead to technical debt. You could write your own hooks, one per unique request to encapsulate the logic, and import them into your components, but most likely the success and error handling will be unique to each use, so you'll need to pass those functions to the hook as well as any path parameters. At that point, is it worth the bother?

@MrEnsiferum77 10 ай бұрын

U can use prefetch on routes level with loaders (u need the cache function from react 18 experimental in nextjs) or with RQ query prefetch function... in v5 of RQ u can use suspense queries to eliminate unecessary rerenders

@Furki4_4 10 ай бұрын

Thank you, I'll give it a try on my current project. and dude, u forgot to add the typescript video at the end of the video :D

@joshtriedcoding 10 ай бұрын

cheers man!

@hithakcer 10 ай бұрын

Implemented Optimistic updates using React Query just last week. Pretty awesome.

@versaleyoutubevanced8647 10 ай бұрын

I remember I did something like that in some of my previous projects. I add in the query data cache, the new post, with "mocked" id and createdAt since they should've come from backend. Then on the onSuccess callback, I get the new post info, and change the mocked post properties with the backend ones. May not cover up all the cases, but was a valid approach back then

@iPankBMW 10 ай бұрын

what do you use to animate the code examples?

@1weiho 10 ай бұрын

Actually, both PowerPoint and Apple Keynote can achieve this effect. Snappify is also a great choice!

@coffeeaddict7652 10 ай бұрын

Thanks Josh, appreciate the video!

@ayushtiwari9343 10 ай бұрын

This was awesome loved it ❤.

@lovrozagar3729 10 ай бұрын

Great video Josh 😀. Please do a headless Shopify/Bigcommerce full project tutorial with auth, payment and deployment. Currently there is no in-depth tutorial for this anywhere on youtube. Thanks 😀

@obaid5761 10 ай бұрын

You'll learn more by trying to build it yourself and figuring it out on your own :)

@eshw23 10 ай бұрын

@@obaid5761 lmao fr

@nikitachernenko3774 10 ай бұрын

Hi! nice video! Is there something special you use to show the code in vs code? or do you just go through pressing ctrl+shit+z?

@Mortada_DEV 10 ай бұрын

Please Please Pretty Please, add chapters and timestamps to your videos. This is the only thing that's missing in the great content you provide.

@shreyas.sihasane 10 ай бұрын

@Josh please make long projects video again like a before saas app. 😊 You are great man!

@ekchills6948 10 ай бұрын

You've made my day bro

@Nab_001 10 ай бұрын

Josh loves React Query and we love josh we love React Query

@mohitcodeswell 10 ай бұрын

Good one! Josh

@joshtriedcoding 10 ай бұрын

thanks mohit, appreciate ya man

@Frontend_Ed 10 ай бұрын

Love this 😍 how do you make the smooth code addition animations? 👀

@technicaltheb034 10 ай бұрын

This video is AI generated.

@joshtriedcoding 10 ай бұрын

as a large language model, i cannot deny this fact

@linusbayere9206 10 ай бұрын

@@joshtriedcoding Which tool did you use to make the video ?

@leonauswien 10 ай бұрын

@@linusbayere9206 since josh is a Chad, he uses ChadGPT

@soumyamondal 10 ай бұрын

He won't reveal

@yaswanthgosula2468 10 ай бұрын

Keynote

@meka4996 10 ай бұрын

Very useful! Thanks

@yanisoulhaci3369 10 ай бұрын

I love your content Josh, very unfortunate I am very bad at English I have to spend 20min on a 10min video

@fennecbesixdouze1794 10 ай бұрын

If your recommended way of handling one of the most common aspects of your application involves doing something like awaiting a call to cancelQueries to prevent your framework from doing what it wants to do, you know you're doing something very wrong. Couldn't think of a worse way of doing this. There are even more problems in this video: resetting the likes to the previous likes likely violates your business logic. Just because some error was returned at some point in your request doesn't mean that the likes are equal to what they were before you clicked "like". In this specific example of a like counter, someone else could be hitting "like" and it could increment for that reason. In other examples, an error might occur handling the connection but the like you submitted very well could have gone through already. Assuming that the application remains in the previous state on an error is almost never correct business logic.

@BeBoBE 10 ай бұрын

If you are going to give criticism actually read up on the docs. No he is not doing something wrong, it’s literally in the docs. Assuming an error means your mutation didn’t happen is also not as crazy as you make it seem as in most cases an error should mean that nothing has happened. Even if something did happen differently on the backend than assumed on the frontend, that problem gets handled by invalidating the data when the mutation settles.

@faizanahmed9304 10 ай бұрын

Video was helpful, but I tried with this query and Next.js (pages router) to get my inbox messages it gives a flash I don't know why. Does query does not support fully Next.js? and yes I did the same steps as you did in query (in mutation).

@mohammadghahri7230 10 ай бұрын

it's a neat trick for making the ux better, but if there's a connection problem or user immediately close the browser it would cause a problem

@antran1686 10 ай бұрын

is there a way to do this in server components. I use sever components to fetch the data on initial load and when a user submits a form i use revalidathPath to get the new data. is there a way to add loading state to that?

@Monstermash355 10 ай бұрын

Would you always use optimistic updates instead of loaders? I mean, where is the limit if there is one? Also, is there a way to do this without react query (with server actions)? Because I feel it's the future, so react query kind of overlaps but I might be wrong

@gosnooky 10 ай бұрын

With some things, a loader is fine, such as updating a profile or some other action that's expected to take time. With more real-time stuff like chats, comments and the like, optimistic updates are the way to go for UX. In fact, loading is preferable in a lot of places because lay people may think an optimistic update on something utilitarian like submitting a form means something isn't working and may try again. Loaders are a fundamental aspect of UX, but the absence of one is also - depending on the context. It's an art to be sure.

@MrEnsiferum77 10 ай бұрын

RQ doing much than that... Eliminates the need for second store, or decoupling the server store data from the client side one redux/zustand... even it's client side library u can optmise the queries to kind of redux selectors so RQ observers will listen to partial cached data, and optimize refetching... in v5 u have suspense queries, which prevents some unecessary rerenders at components mount or even u can make mix with react router where u can prefetch some much needed data when some route is executed, so components are free from fetching logic and u can work with cache from RQ store... There's other good benefits from using RQ, even u can create hybrid model in SSR frontend frameworks...

@technical.legend 10 ай бұрын

Next Video suggestion: React + vite v/s Nextjs (including deployment)

@mdmathewdc 10 ай бұрын

How do you do the animation of the code snippets?

@blazi_0 10 ай бұрын

Another way i use sometimes, i store the data inside jotai store so ill use the react states to update it very easily from anywhere when mutating any data

@LlamaPony 10 ай бұрын

epic!

@oliverquixchan 10 ай бұрын

is there a particular reason you chose react query over swc?

@MrBlazzerBoy 10 ай бұрын

Video is way too fast.

@ThanHtutZaw3 9 ай бұрын

But it won't get latest like count . Every click success or error should update latest like count from DB because other user will like the post anytime .

@fiqihalfito8776 10 ай бұрын

Josh tried liking his video

@mustafa.wael-dev 10 ай бұрын

what is the best way to use react state Management and react query with next 13 and server component, could you share a video with the best implementation or starter?🙂

@gregthomas5887 10 ай бұрын

what do you use to animate the code examples? (2)

@alwaysgrowww 10 ай бұрын

he used keynote i guess - kzfaq.info/get/bejne/Y7SdZMmV18u8kaM.html

@girijeshthodupunuri1300 10 ай бұрын

can you link me the repo with the react query code? I really want to fully grasp the use of it!

@asadmalik5075 10 ай бұрын

Can you make a detailed tutorial on real life usage of react query along side with redux ? any advanced todo app something like that ?

@bibahbibah5108 10 ай бұрын

after seeing this i don't recommend optimistic method it's very tricky 😂 it make a very simple code to hell, the bests practices are based on simplicity

@irfansaeedkhan7242 10 ай бұрын

why not use swr ? which one is better swr or react query

@MVGaming77 10 ай бұрын

do i have to use 'use client' when using this?

@codinginflow 10 ай бұрын

Yes, hooks can only be used inside client components

@statuschannel8572 7 ай бұрын

only if its Next.js

@sujjee 10 ай бұрын

hey josh next long video on netflix clone?? with all new and latest nextjs 13 , tRPC and prisma

@fulldeploy 10 ай бұрын

I forgot to press the like button so I came back to press it 1.4K times - sub’d

@eesaaphilips9271 10 ай бұрын

Nice video. It seems to me like doing it yourself is just as simple as using a library (I do it myself in jQuery and Solidjs). I don't see much value in react query at all

@user-zx8cl1qg8u 10 ай бұрын

Will this work with trpc?

@AleksandrNeo 10 ай бұрын

Can we do same things in Solid js?

@MrEnsiferum77 10 ай бұрын

The optmisic update, it's a bit problematic and u need to know what u are doing... In case of RQ optimistic update, react doesn't rerender, which can be problematic many times....

@rajsandhu3344 29 күн бұрын

You guys can follow along 😮

@gosnooky 10 ай бұрын

I love ReactQuery.

@user-kj2zg3pv9w 10 ай бұрын

I love React query but still don't understand how to use it 😢😢😢 i want to understand it's concept badly welp😢😢😢😢😢😢

@ejoojoo 10 ай бұрын

how to do this with trpc?

@AnthonyPaulT 10 ай бұрын

Sorry but the third way looks terrible. I’m a staff engineer. My code is great without react query.

@stf8375 10 ай бұрын

you teach me something, thanks !!

@nikhil8279 10 ай бұрын

hey can u please add all your Big projects in a dedicated playlist 💗

@taquanminhlong 10 ай бұрын

this already built in for Remix 😂

@chi-mf1cx 10 ай бұрын

Bro plz make a video on when to fetch server side and client side

@BandosLP 10 ай бұрын

Hi Josh, can you release the source code for this?:)

@DanielRios549 10 ай бұрын

7:33 Be honest, this is not intuitive

@MathewNiania 10 ай бұрын

You should be aware they are depracating most of the "on" methods, so it might be best not to suggest them.

@joshtriedcoding 10 ай бұрын

Pretty sure they're only being deprecated for the query, not for the mutation

@MathewNiania 10 ай бұрын

@@joshtriedcoding Ah yes, sorry you're right! Nice vid :)

@sburke0708 10 ай бұрын

The title and the thumbnail are misleading of what this video is actually about

@rhkina 10 ай бұрын

Too complicated! Isn't there a simpler solution?

@tomas120 10 ай бұрын

nice!

@satyak1337 10 ай бұрын

I feel like this is too complex devs and sometime frustrating for user. The only legit use cases for optimistic update is like/comment. for small use cases, simple react state is much easier/cleaner than mutate stuff.