0:00
/
0:00
Transcript

Welcome to the new week!

Tomasz Ducin is back with us to explain the next parts of Frontend Architecture—this time with a deeper, more hands-on walkthrough of Frontend State Management on the React Query example.

And this is a free episode available to all, so check it out!

Why did we decide to zoom in on React Query? It’s a novel approach that can simplify front-end and back-end communication. We wanted to show a practical example of a dedicated technology for handling server data, especially given how often I see teams mix local UI state and remote data in ways that cause stale info, redundant fetching, and scattered “loading” flags. Tomek walked me through exactly why React Query solves those problems.

And Tomek is one of the best people I know, specialising in Frontend and Architecture. He’s an Independent Consultant, Architect, Developer, Speaker, and Trainer. Expertise in Web Technologies & Software Architecture. Angular Devtools Contributor. Egghead Instructor.

Just check the video to see how he used visuals to explain React Query and state management work.

What else have we discussed?

Tomek emphasized the crucial distinction between purely local UI data, such as toggles or form inputs, and data you fetch from a server. When these two categories are combined in one place, it becomes unclear which part of your code is responsible for updates, which can result in inconsistent behaviour.

Keeping them separate helps maintain a clean structure and ensures each data part is updated in the right context.

Tomek then outlined the main challenges:

  • caching strategies,

  • time-to-live settings,

  • stale-while-revalidate patterns.

He also discussed query keys, which let you organize and invalidate server responses based on what actually changed—no brute-force reloading.

We jumped into real code, showing how React Query handles data fetching and background prefetches and automatically updates the UI when tabs come in and out of focus. Tomek demonstrated how to set mutation hooks for things like deleting a record and how easy it is to invalidate just the relevant pieces of the cache. The DevTools panel gave a clear view of each query’s status, simplifying debugging.

Tomek also showed us and proved that even though technology started in the React community, it can be used in other frameworks like Angular. Actually, it’s not called a React Query anymore, but Tanstack Query.

What surprised me was the overlap with backend patterns, like pub/sub or connection pooling. Tomek’s explanation showed that when React Query decides whether to serve cached data or make a new HTTP call, it’s basically doing a form of “pooling” and “subscription” management.

That’s a familiar concept in many server-side architectures, which shows how these patterns aren’t just front-end tricks. Logically, it’s not far from what we discussed in Mastering Database Connection Pooling.

So again, that showed that we should not put a fence between us and discuss whether we face Frontend or Backend Architecture, it’s just Architecture!

Architecture Weekly
Frontent Architecture, Backend Architecture or just Architecture? With Tomasz Ducin
Welcome to the new week…
Listen now

I learned a lot, and I’m sure that you’ll learn to. Check the video, comment, and tell us how you liked it.

Please also send us the topic that you’d like us to discuss next time. Tomek has a lot of fuel in his back!

Check also more from Tomek:

Of course, React Query documentation.

And other webinars!

Cheers!

Oskar