The Better Way to do Loading States in React 

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

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

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

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

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

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

Thanks Josh, appreciate the video!

This was awesome loved it ❤.

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

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

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

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?

You've made my day bro

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.

Very useful! Thanks

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

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

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

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

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?

Good one! Josh

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

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

what do you use to animate the code examples?

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

epic!

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

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

How do you do the animation of the code snippets?

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"

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

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

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

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

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

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

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.

Josh tried liking his video

Can we do same things in Solid js?

Will this work with trpc?

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

you teach me something, thanks !!

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

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 😀

how to do this with trpc?

I love ReactQuery.

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

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

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 .

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

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.

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

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

this already built in for Remix 😂

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

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

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

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

nice!

This video is AI generated.

ok

just tesing

7:33 Be honest, this is not intuitive

Video is way too fast.

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

I like using swr only for this 😂 now less swr

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.

sdfsdf testing

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

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

Too complicated! Isn't there a simpler solution?