React Query: It’s Time to Break up with your "Global State”! -Tanner Linsley

[@makertolentino]

This dude is a rockstar

[@fostertheweb]

react-query examples start at 16:08 for anyone coming back for reference

[@EdwinManual]

This is the library we need. But not the one we deserve. He is a true hero ❤️

[@tshddx]

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.

[@traviswatson6527]

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.

[@qorzzz9252]

I also noticed this, seems like rollback not working properly.

[@ВикторСтефанов-ш5р]

Or maybe to delete Tanner and get the response back Tanner 2 was already inserted and the initial value deleted?

[@aeronwolfe7072]

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

[@patrickkaipainen3301]

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

[@sylviaadamski8191]

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.

[@amnonsadeh8047]

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

[@NITINKUMARNagamala]

May be the rollback got updated to the latest.

[@TodorPavlov]

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

[@ahmedsafwat3488]

also the ads in the bottom is so annoying but great content

[@moutonguerrier]

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

[@PankajKumar-mv8pd]

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?

[@piby1802]

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?

[@mKumaranVeera]

Sorry, I couldn't continue the video, I can't see the code editor 🧐

[@jimshtepa5423]

Thank you for this informative talk and great presentation. I was wondering if the codebase that Tan is using available publicly?

[@ChrisDieringer]

the slide-show? is quite nice. anyone know what toolkit was used to _build_ this presentation?

[@tannerlinsley]

Keynote from Apple

[@rubencalzacorta879]

its called Powerpoint

[@tannerlinsley]

Ruben Calzacorta nope. Keynote

[@mustaflex]

"Prop Drilling" such a good way to share the pain of passing down the props to children.

[@ГерриПитт]

Nice talk, man! It would have been great if you had shared a link to the code.

[@8497715]

What presentation engine do you use? It is visually awesome!

[@chauvoluuhuong7485]

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

[@Victor-zg8kq]

For future vids, please show the code full screen and shrink the speaker into one of the corners.

[@Atif1702]

Unable to see the code at all. 20% of the screen is code editor whereas it should have been on at least 50%.

[@jimshtepa5423]

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?

[@chetan9533]

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

[@KomarovPavel-if8ud]

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

[@mohamedfouedslama3412]

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.

[@niallryan209]

Great video. Definitely going to start using react query.

[@tannerlinsley]

Nice!

[@RakeshKumarBN]

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

[@MrChrisk8er]

Hi, can you please share the code? I need to learn it. Thanks

[@KunalKamble]

It’s really hard to see your code, you should have made code full screen or increase font size.

[@ljuglampa]

This library will (have?) blow tf up. Love it.

[@squashtomato]

get this man a glass of water, he needs and deserves it. He is doing God's work

[@adepressedman7156]

LOL

[@mitsukiorichimaru4511]

haha at 18:25 you renamed another post to "tanner" which makes the searched dead post in side bar come to life

[@richardhulse9328]

Really, really great video. Please: more editor on screen, and less audio compression on the mic as it makes you sound asthmatic!

[@toneyf]

will it work with websockets data?

[@braveman4665]

anyone got link for the source?

[@zakidev]

Tanner is life saver

[@az1nn]

very good! nice explanation about the motivation of creating react query!

[@ZeeshanAhmad-lq5nc]

where i can find this repo?

[@akshayagrawal8130]

Absolutely amazing..I never knew I needed this. Impressive presentation

[@javascriptduniya1201]

font size is to small. I closed video after trying hard for few minutes

[@akeinchina]

Amazing content! Thank you Tanner!

[@zzy8811]

Thank you, a useful intro!

[@lg2389]

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 (:

[@jahadempire7934]

Newbs here, if I have a client state, then what state manager I will use?

[@jahadempire7934]

oh, he said @26:00 he used context and useReducer..

[@magnusmarkling]

Fantastic presentation!

[@thedeveloper4207]

CAN'T SEE THE CODE

[@sergeykahnwald6640]

Great job man!

[@heesoolee72]

This video is amazing. Btw his keynote skill is amazing too.

[@jbradshaw7]

I didn't realise I needed this until I watched - thanks.

[@chriszhang3629]

This is amazing!

[@tannerlinsley]

Thanks!!

[@shoaibbhimani7831]

Thanks Tanner Nicely Explained

[@mivchal333]

You are React Rockstar!

[@jrandiny3]

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

[@ralexand56]

This is freaking amazing!

[@hitchlander3800]

Thank you Tanner . Makes a lot of sense.

[@galbatorixtheking9779]

is this code on github? can someone please share the link for it?

[@OmkarRajam]

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

[@blank001]

To me this guy is a Rock star in Tech world.

[@tsooooooo]

Very cool work

[@glendonphilippbaculio1811]

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

[@user-hu1jr6fb9k]

that's exactly what he's suggesting

[@ricardoespinoza5821]

awesome things from tanner as always

[@meandillar69]

Thanks for the great video!

[@pooryaj2092]

What is this cam-girl size camera, show the code man

This is briliant

[@mitsukiorichimaru4511]

kzbin.info/www/bejne/qZa4ZWmZa6-tbac at 18:13 you have deleted a updated post but you can still see posts title "tanner" found in the sidebar

[@asyncasync]

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]

github.com/tannerlinsley/react-query-devtools By using this perhaps?

[@asyncasync]

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

[@AdrianGonzalezBlogs]

This is great!

[@rjmunt]

Thanks a lot sir!

[@tannerlinsley]

My pleasure!

[@pannihto7588]

So basically, this is Apollo Client for REST API

[@AW-zk4nf]

seems like mind blowing to who haven't use react apollo hooks before...

[@avi7278]

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.

[@RomeoMihalcea]

neat stuff - by the time people learn this thing it will already be obsolete.

[@mrwho2513]

12:54 - farting time

[@CathalMacDonnacha]

😂

[@codefinity]

🤣 I never would have thought 💭 that!

[@heesoolee72]

dude lol

[@ПашаБелугин]

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!

[@tannerlinsley]

Not sure what this has to do with the content. 🤷‍♂️

[@anoopvasudevan]

man this is awesome! would like to know what's happening under the hood

[@i-am-the-slime]

How do you look younger than a photo of yourself?

[@i-am-the-slime]

Ben Jsman Button!

[@jimbo4728]

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

[@tomasmedina]

this is exactly what i was looking for to handle my server state!

[@mosespeter9711]

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

[@haroldpepete]

i need a new eyes after watching this video

[@wkencel]

Young Jonah Hill makes a badass developer

[@Arzen84]

I wish I'd be just half as smart as Tanner :sweaty-smile;

[@Peter-ur8nv]

Sadly there is no option to hit like button more than once...

[@hansheng654]

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.

[@omicronx94]

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

[@hansheng654]

@@omicronx94 then you have redux ,context API

[@yashmalik3037]

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.

[@LouaiAmrouche-iu9bc]

bro fix your docs, they're the worst i've ever seen

[@daniilkonoplev5499]

"I absolutely love React... and Javascript". Liar. Nobody loves JS :D

[@scotttang6229]

I love JS...

[@MunyaradziRangaIncrease]

Math.abs(genius = 1)

[@parrot785]

Awesome presentation!