The Better Way to do Loading States in React

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

[oldqwfdqwqwfq]

Love your videos and consistent work ethic Josh.

Amazing content. Wishing you the best!

[KellenProctor]

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

[mikelCold]

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

[ethioapps]

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

[SaadKhan-rlqy]

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

[isipisi]

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

[cloynelson]

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.

[clemensjanes]

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

[hithakcer]

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

[BritainRitten]

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"

[Furki_]

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

[versaleyoutubevanced]

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

[mdmathewdc]

How do you do the animation of the code snippets?

[mohammadghahri]

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

[Nab_]

Josh loves React Query and we love josh <=> we love React Query

[blazi_]

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

[DanielRios]

7:33 Be honest, this is not intuitive

[iPankBMW]

what do you use to animate the code examples?

[antran]

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?

[yanisoulhaci]

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