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!
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:
His Polish course Architecture on Frontend (yes, it’s polished!)
Of course, React Query documentation.
And other webinars!
Cheers!
Oskar
#2 - Keep your streams short! Or how to model Event-Sourced systems efficiently
#6 - Alexey Zimarev - You don't need an Event Sourcing framework. Or do you?
#7 - Design and test Event-Driven projections and read models
#9 - Radek Maziarka - Modularization with Event Storming Process Level
#11 - Maciej "MJ" Jędrzejewski - Evolutionary Architecture: The What. The Why. The How.
#12 - Jeremy D. Miller: Simplify your architecture with Wolverine
#14 - Mateusz Jendza - Why Verified Credentials is the Future of Digital Identity!
#15 - Mário Bittencourt: Leveraging BPMN for Seamless Team Collaboration in Software Development
#16 - Papers We Love #1 - Sagas (Hector Garcia-Molina, Kenneth Salem)
#18 - Andrea Magnorsky: Introducing Bytesize Architecture Sessions!
#20 - Papers We Love #2 - How do committees invent? (Melvin E. Conway)
#21 - Michael Drogalis: Building the product on your own terms
#23 - Gojko Adzic on designing product development experiments with Lizard Optimization
#24 - Frontent Architecture, Backend Architecture or just Architecture? With Tomasz Ducin
#25 - Applying Observability: From Strategy to Practice with Hazel Weakly
#26 - React Query: A solution for Frontend State Management challenges? With Tomasz Ducin
Share this post