I’ve checked out React-query before, but this video really sold me on the concept! I’m going to try it out on a new internal tool at work. I would love to see more screencasts covering some of the more advanced features like pagination.
21:20 I hope I am missing something on this mock server failure, it looks like it corrupted the list (removed Tanner even though Tanner 2 was the one that failed) and lost the user’s changes. Pessimistic me is not impressed with this optimistic mutation.
The overview of different 'naive' strategies for dealing with async data is actually really great. Going from simple useState/useEffect combo in a component, to a decoupled context module that can handle de-duping
it took me a while to get used to the way it works, and how to sperate out my api's from my components, but at this point, i would never go back. i absolutely LOVE react-query (tannstack query). it makes it SO easy... and the fact that it's smart about caching, even when I AM NOT, is amazing!!!!!! Thank you Tanner Linsley!!! still using your library!!!
Massive thx for React Query :) Been using it for a few weeks now and it is a breeze! React Query is especially useful for devs who focus on the frontend and usability side of things rather than having to deal with complicated React state managers.
Bug at 21:20 ? He demonstrates optimistic UI by creating two posts. The second post fails, but when the UI updates to reflect that, it's the first which disappears...
For deduping requests why don't you just add to the PostCount component a prop as a number of posts. btw, your presentation about benefit of using react-query is very good
Hi Tanner, React query looks very good. Thanks for making this. I have one question related to the normalizing state, suppose I have to add comment section in each post. Earlier we used normalizer for this. How normalizer will fit in React Query state? Do you have any example of that?
I was just struggling to organize my state in my react native app. Just found your video and the library. May thanks, sir! Could you share link to the code so that we can play with it?
The topic is interesting but the code is not readable at all - please in the feature when you make videos put the code on full screen and yourself in the lower right part of the screen (by the way I use 56 inch monitor so the problem is not in the monitor size).
I think what's missing in this talk is REST. The introduced concept of "server state" was used in two ways: to point out to data persisted beyond client and to point out to a part of "global state". It's an awkward abstraction. I think it's better to use REST language and talk about resources and representations of their state. React-query extends http/rest abstractions into the client app, but most of it already exists! The web is layered by design and same thing that react-query does on client can be done on any layer between a client and a server. In fact there might not even be "the server" you are talking to. With clouds you might deal with clusters and many layers of caching and god only knows where your response comes from. Browser also does caching. So it's more appropriate to talk about resources and representations of their state, it's better to have one language for the whole web layer than to separate frontend and create separate abstractions, it's better to solve problems with the whole stack of web technologies than to think inside frontend JavaScript box. It might be that later on part of the solution would be on the backend and it would push updates to the client instead of client refetching it, or it might be that browsers will build something on top of fetch with similar capabilities to what react-query provides - who knows! And ofc if you use REST language it becomes obvious that all of this relates to a particular way of network communication and that there're other ways like streams, where there're different problems and different solutions. Great presentation though and great technology! I'm two years late with my project plagued by legacy, but I'm glad that I'm catching on)))
just awesome man. used react query as an experiment and it is just super convinient and easy to work with. i am used to use redux at work but now i'm gonna reconsider this decision. keep up the hard work and thanks for this awesome tool.
Great talk man! I will look more into react-query and try it out! Def somethings to improve on your talks. Breathing and if you show code, please make your font size higher, but aside from that, the example and how you laid out the talk was great (:
at 11:20 Tanner confirms that implementing a global state and attempting to pass it down the component tree doesn't work. However I didn't full understand the explanation. Can someone please explain why global state didn't resolve the issue related to multiple invokiation of the fetch function?
Because the global state is just a state variable accessible to all components. But where is the logic that actually fires a network request? It's inside a useEffect within our custom hook(usePosts), right? Now the custom hook is supposed to be used at multiple places within our app. And the code within custom hook(which includes invoking fetch function) runs as many times as we reuse the custom hook (similar to why code inside a normal function runs as many times as you invoke/call that normal function). So code within custom hook running multiple times -> multiple network requests
good for backend operations but i just personally prefer redux for local state management specially with react native, you use react navigation, you know why it's useful there
Code in vid is here: github.com/tannerlinsley/react-query-blog-refactor-example/commits/master Each commit is a stage like in the video. If you're using VScode with Gitlens, it's easy to check out the version of the code at that commit like Tanner does in the video
People keep mentioning how this is going to replace redux, but for me one of the selling points for redux is the ability to easily keep track of state while debugging using redux devtools. How do I debug this?
@@babri1402 it does not seem to support time travel though and the maintainer closed an issue about it saying he is not planning on implementing this any time soon.
Stop stop stop! Do you wanna say that Dan Abramov was wrong? This cannot be! That way the industry will soon discover some advanced features like OOP and maybe even MVC!
I can't see the difference between this and Apollo Client for React. Unless you were referring to AC as overpowered, because it provides all this functionality and more, like being able to run graph queries on your cache, and observable queries with subscriptions. ReactQuery looks like a pared-down version of Apollo Client.
We really don't need to see your face throughout the video... the code is so tiny and almost invisible because of the screen split between it and your face. Great Concept though
this video is unwatchable. I really wanted to watch it but that microphone is way to sensitive, hearing all the breathing and swallowing drives some people insane. less sensitive microphone would be good
You have such clear mic that your breathing is irritating. I can't focus on what you are saying, I can't go through this. Please drink some water and work on your breathing while recording. I almost threw my laptop after bearing 8 minutes 28 seconds of this video.
Coming from backend dev and functional programming world, when I first learnt react and concept of redux.. I knew that the frontend dev world is fked..... Global state can be bad, singleton should be avoided... Pure functions only... Those are common ideas among functional programming yet very different in the react world.
Lol you have no idea what you're talking about. React is in fact centered around pure functions and not using singletons. Why do you think it's called "React" ?
This gentleman is my hero.
Starting with the separation of states is exactly what has been eating at my sole all this time.
May I suggest some foot ointment ;)
@@rjmunt best comment
This dude is a rockstar
This is the library we need. But not the one we deserve. He is a true hero ❤️
react-query examples start at 16:08 for anyone coming back for reference
I’ve checked out React-query before, but this video really sold me on the concept! I’m going to try it out on a new internal tool at work. I would love to see more screencasts covering some of the more advanced features like pagination.
21:20 I hope I am missing something on this mock server failure, it looks like it corrupted the list (removed Tanner even though Tanner 2 was the one that failed) and lost the user’s changes. Pessimistic me is not impressed with this optimistic mutation.
I also noticed this, seems like rollback not working properly.
Or maybe to delete Tanner and get the response back Tanner 2 was already inserted and the initial value deleted?
The overview of different 'naive' strategies for dealing with async data is actually really great. Going from simple useState/useEffect combo in a component, to a decoupled context module that can handle de-duping
it took me a while to get used to the way it works, and how to sperate out my api's from my components, but at this point, i would never go back. i absolutely LOVE react-query (tannstack query). it makes it SO easy... and the fact that it's smart about caching, even when I AM NOT, is amazing!!!!!! Thank you Tanner Linsley!!! still using your library!!!
Massive thx for React Query :) Been using it for a few weeks now and it is a breeze! React Query is especially useful for devs who focus on the frontend and usability side of things rather than having to deal with complicated React state managers.
Bug at 21:20 ? He demonstrates optimistic UI by creating two posts. The second post fails, but when the UI updates to reflect that, it's the first which disappears...
For deduping requests why don't you just add to the PostCount component a prop as a number of posts. btw, your presentation about benefit of using react-query is very good
12:00 how to de-dupe requests by using a react ref on the Promise
17:00 react-query in the blog app starts here
"Prop Drilling" such a good way to share the pain of passing down the props to children.
Hi Tanner, React query looks very good. Thanks for making this. I have one question related to the normalizing state, suppose I have to add comment section in each post. Earlier we used normalizer for this. How normalizer will fit in React Query state? Do you have any example of that?
I was just struggling to organize my state in my react native app. Just found your video and the library. May thanks, sir! Could you share link to the code so that we can play with it?
For future vids, please show the code full screen and shrink the speaker into one of the corners.
The topic is interesting but the code is not readable at all - please in the feature when you make videos put the code on full screen and yourself in the lower right part of the screen (by the way I use 56 inch monitor so the problem is not in the monitor size).
also the ads in the bottom is so annoying but great content
wow!! looks like react-query is going replace redux as server state management tool in the future but as now they can live side by side together
font size is to small. I closed video after trying hard for few minutes
I think what's missing in this talk is REST. The introduced concept of "server state" was used in two ways: to point out to data persisted beyond client and to point out to a part of "global state". It's an awkward abstraction. I think it's better to use REST language and talk about resources and representations of their state. React-query extends http/rest abstractions into the client app, but most of it already exists! The web is layered by design and same thing that react-query does on client can be done on any layer between a client and a server. In fact there might not even be "the server" you are talking to. With clouds you might deal with clusters and many layers of caching and god only knows where your response comes from. Browser also does caching. So it's more appropriate to talk about resources and representations of their state, it's better to have one language for the whole web layer than to separate frontend and create separate abstractions, it's better to solve problems with the whole stack of web technologies than to think inside frontend JavaScript box. It might be that later on part of the solution would be on the backend and it would push updates to the client instead of client refetching it, or it might be that browsers will build something on top of fetch with similar capabilities to what react-query provides - who knows! And ofc if you use REST language it becomes obvious that all of this relates to a particular way of network communication and that there're other ways like streams, where there're different problems and different solutions. Great presentation though and great technology! I'm two years late with my project plagued by legacy, but I'm glad that I'm catching on)))
Really, really great video. Please: more editor on screen, and less audio compression on the mic as it makes you sound asthmatic!
get this man a glass of water, he needs and deserves it. He is doing God's work
LOL
Sorry, I couldn't continue the video, I can't see the code editor 🧐
just awesome man. used react query as an experiment and it is just super convinient and easy to work with. i am used to use redux at work but now i'm gonna reconsider this decision. keep up the hard work and thanks for this awesome tool.
Nice talk, man! It would have been great if you had shared a link to the code.
Thank you for this informative talk and great presentation. I was wondering if the codebase that Tan is using available publicly?
This library will (have?) blow tf up. Love it.
haha at 18:25 you renamed another post to "tanner" which makes the searched dead post in side bar come to life
Great talk man! I will look more into react-query and try it out! Def somethings to improve on your talks. Breathing and if you show code, please make your font size higher, but aside from that, the example and how you laid out the talk was great (:
the slide-show? is quite nice. anyone know what toolkit was used to _build_ this presentation?
Keynote from Apple
its called Powerpoint
Ruben Calzacorta nope. Keynote
Great video. Definitely going to start using react query.
Nice!
Wow, I have been searching this for a long time. Long story short, my searching skill let me down. Well it's better late than never
Unable to see the code at all. 20% of the screen is code editor whereas it should have been on at least 50%.
very good! nice explanation about the motivation of creating react query!
It’s really hard to see your code, you should have made code full screen or increase font size.
This video is amazing. Btw his keynote skill is amazing too.
What presentation engine do you use? It is visually awesome!
12:54 - farting time
😂
🤣 I never would have thought 💭 that!
dude lol
Tanner is life saver
Thank you, a useful intro!
Hi, can you please share the code? I need to learn it. Thanks
Absolutely amazing..I never knew I needed this. Impressive presentation
Thanks Tanner Nicely Explained
I didn't realise I needed this until I watched - thanks.
at 11:20 Tanner confirms that implementing a global state and attempting to pass it down the component tree doesn't work. However I didn't full understand the explanation. Can someone please explain why global state didn't resolve the issue related to multiple invokiation of the fetch function?
Because the global state is just a state variable accessible to all components. But where is the logic that actually fires a network request? It's inside a useEffect within our custom hook(usePosts), right?
Now the custom hook is supposed to be used at multiple places within our app. And the code within custom hook(which includes invoking fetch function) runs as many times as we reuse the custom hook (similar to why code inside a normal function runs as many times as you invoke/call that normal function).
So code within custom hook running multiple times -> multiple network requests
To me this guy is a Rock star in Tech world.
Amazing content! Thank you Tanner!
This is amazing!
Thanks!!
You are React Rockstar!
Thank you Tanner . Makes a lot of sense.
anyone got link for the source?
Fantastic presentation!
good for backend operations but i just personally prefer redux for local state management specially with react native, you use react navigation, you know why it's useful there
that's exactly what he's suggesting
Great job man!
This is freaking amazing!
Awesome presentation!
will it work with websockets data?
This is briliant
CAN'T SEE THE CODE
where i can find this repo?
awesome things from tanner as always
Very cool work
What is this cam-girl size camera, show the code man
neat stuff - by the time people learn this thing it will already be obsolete.
Thanks for the great video!
Newbs here, if I have a client state, then what state manager I will use?
oh, he said @26:00 he used context and useReducer..
So basically, this is Apollo Client for REST API
seems like mind blowing to who haven't use react apollo hooks before...
This is great!
i need a new eyes after watching this video
Thanks a lot sir!
My pleasure!
is this code on github? can someone please share the link for it?
Code in vid is here: github.com/tannerlinsley/react-query-blog-refactor-example/commits/master
Each commit is a stage like in the video. If you're using VScode with Gitlens, it's easy to check out the version of the code at that commit like Tanner does in the video
People keep mentioning how this is going to replace redux, but for me one of the selling points for redux is the ability to easily keep track of state while debugging using redux devtools. How do I debug this?
github.com/tannerlinsley/react-query-devtools
By using this perhaps?
@@babri1402 it does not seem to support time travel though and the maintainer closed an issue about it saying he is not planning on implementing this any time soon.
man this is awesome! would like to know what's happening under the hood
this is exactly what i was looking for to handle my server state!
Stop stop stop! Do you wanna say that Dan Abramov was wrong? This cannot be!
That way the industry will soon discover some advanced features like OOP and maybe even MVC!
Not sure what this has to do with the content. 🤷♂️
I wish I'd be just half as smart as Tanner :sweaty-smile;
Young Jonah Hill makes a badass developer
I can't see the difference between this and Apollo Client for React. Unless you were referring to AC as overpowered, because it provides all this functionality and more, like being able to run graph queries on your cache, and observable queries with subscriptions. ReactQuery looks like a pared-down version of Apollo Client.
ua-cam.com/video/seU46c6Jz7E/v-deo.html at 18:13 you have deleted a updated post but you can still see posts title "tanner" found in the sidebar
How do you look younger than a photo of yourself?
Ben Jsman Button!
Sadly there is no option to hit like button more than once...
We really don't need to see your face throughout the video... the code is so tiny and almost invisible because of the screen split between it and your face. Great Concept though
this video is unwatchable. I really wanted to watch it but that microphone is way to sensitive, hearing all the breathing and swallowing drives some people insane. less sensitive microphone would be good
You have such clear mic that your breathing is irritating. I can't focus on what you are saying, I can't go through this. Please drink some water and work on your breathing while recording. I almost threw my laptop after bearing 8 minutes 28 seconds of this video.
bro fix your docs, they're the worst i've ever seen
Coming from backend dev and functional programming world, when I first learnt react and concept of redux.. I knew that the frontend dev world is fked..... Global state can be bad, singleton should be avoided... Pure functions only... Those are common ideas among functional programming yet very different in the react world.
Lol you have no idea what you're talking about. React is in fact centered around pure functions and not using singletons. Why do you think it's called "React" ?
@@omicronx94 then you have redux ,context API
"I absolutely love React... and Javascript". Liar. Nobody loves JS :D
I love JS...
Math.abs(genius = 1)