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

 
  🗓 Talk recording from React Summit Remote Edition 2020

See other React conferences by GitNation

#React Query: It’s Time to Break up with your "Global State”!
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as “global state”. In this talk, you’ll get the lowdown on why most of your “global state” isn’t really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you’re used to.

Tanner Linsley
When not programming, Tanner spends his free time traveling, recording music, film-making, and vacationing with his wife and children.

[Aaaaaaaaaaaaaaaahhhhhhh]

This gentleman is my hero.
Starting with the separation of states is exactly what has been eating at my sole all this time.

[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 ❤️

[aeronwolfe]

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 Thank you Tanner Linsley!!! still using your library!!!

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

[patrickkaipainen]

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

[sylviaadamski]

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.

[traviswatson]

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.

[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

[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

[chauvoluuhuong]

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

[amnonsadeh]

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

[Victor-zgkq]

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

[piby]

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?

[PankajKumar-mvpd]

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?

[ljuglampa]

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

[richardhulse]

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

[lg]

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

[mohamedfouedslama]

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.

[KomarovPavel-ifud]

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