The Better Way to do Loading States in React

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 .

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

you teach me something, thanks !!

ok

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

How do you do the animation of the code snippets?

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.

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

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

sdfsdf testing

epic!

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

Video is way too fast.

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

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

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

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

Can we do same things in Solid js?

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?

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

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

do I understand correctly that with Firestore onSnaphot queries, you get optimistic updates out of the box?

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

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

Will this work with trpc?

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

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

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

this already built in for Remix 😂

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

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....

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

Very useful! Thanks

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

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

Josh tried liking his video

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

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?🙂

Too complicated! Isn't there a simpler solution?

I love ReactQuery.

what do you use to animate the code examples?

OnError, OnSuccess, OnSettle
are all deprecated by now according to the docs.
Luckly, you can achieve the same results using custom hooks that returns the returned value of useQuery, or simply use your own useEffect.

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.

I like using swr only for this 😂 now less swr

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

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

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

This was awesome loved it ❤.