How we implemented SWR in a project and why we loved it
Kamil Polok
Jun 09, 2021・6 min read
Why SWR?
Recently, we had the opportunity at SDH to develop a project using React with support from Redux/Toolkit. Thing is, though data was kept and fetched in the store, there was no caching mechanism implemented in the app. And holding dozens of responses in the state is not my idea of a cool idea. Whatever the case, it soon got a little too easy to get lost in all those state slices, despite the use of Toolkit.
What’s more, it had zero influence on the backend at that point. With those iceberg-sized chunks of data drifting about, some requests took an eternity to resolve. And since the UI’s application consisted of long item lists with few CRUD operations, it soon became clear that some form of cache would come in pretty handy just about then. So the choice fell to SWR - a library made by the developers of Vercel (also of Next.js fame).
What is SWR?
Ok, do you like reading definitions? I hope not, because this is going to be one of the shortest you've ever read. ‘SWR is a React Hooks library for remote data fetching’. That's it. Simple? Yes, but I will now show you that SWR is also very powerful. And in case you were wondering, SWR stands for stale-while-revalidate. Which already explains how it works. SWR returns data from cache (stale), sends a fetch request to get updated data (revalidate), then returns new data. Like I said, simple.
Why we loved SWR
It’s easy to recognise how using SWR eliminates problems described at the beginning of this article. Thanks to SWR, we:
- Made the UI work perfectly (after initial data requests) thanks to caching data
- Removed nearly all slices holding API data and accompanying logic
- Simplified the flow of revalidating data after making CRUD operations on data collections
- Sped up the development of new API-dependent features
How did we actually implement this library for such magical results?
How SWR works
After a short while of working with SWR, it proved itself to be rather simple and quite user-friendly. Fancy making an API request using SWR? Have this:
The only catch is the fetcher. It’s just your custom function for fetching data. The application we worked on already had axios set up and running with its entire config (interceptors, headers, base URL, etc.), so we just wrapped our axios instance like this to get our own custom fetcher:
Therefore, the entire hook could look as simple as this (let's skip error handling in this example):
And... that's it! We’ve created a hook for fetching API data using all the SWR goodies. Whenever this hook is fired, it will return previously fetched data first (if present), and only then revalidate data and return new collection afterwards.
SWR out of the box comes with a handful of pre-configured parameters (all are listed here), which make working with it a piece of cake. A favorite option worth mentioning is dedupingInterval.
Typical use-case scenario: fetch data in one component, keep developing this component further, watch children grow out of control, only for a 4th level child to need the data. How you get this data into the child component without much effort whilst avoiding repeated requests is always a challenge. But fear not: simply reuse the SWR hook... The deduping interval will not allow the request to be made again within a specified amount of time (2 seconds by default). Fair enough.
"But if I call the endpoint, and it returns the same data as before, my component will still re-render". It will not: SWR implements deep comparison so re-render will only be triggered when data has actually changed. And the comparison function can, of course, be customized.
Data mutation
But you might argue that GETting data is always easy - what about the mutating part? Surely this is more complicated. Well, not really, mutations don't have to be a nightmare, and I was surprised how easy it is to mutate data using SWR (previously having had some fun with Apollo). Here's a real-life example:
In this example mutate is a function imported from SWR and /users is the key we gave it in useUsers hook (It doesn't have to be the endpoint URL - you can pass the key and URL separately).
Should you wish to cache and update a single entity (object) fetched from a bigger collection, simply mutate it by its key like so:
Looks too simple? It is simple. Try it for yourself and you just may save considerable time writing extensive Redux logic and debugging your API calls.
SWR integrations
As you can see, implementing SWR is simple; with a few nice touches, it doesn’t take much to advance the above examples to higher, more abstract levels. Obviously, SWR is not limited to this and there is a great number of options and integrations available:
graphQL integration
error handling with retry options
auto revalidation
pagination support (also for infinite loading)
data prefetching
and many more (documentation)
We found working with SWR supremely cool and will definitely consider using it for future projects. If you’d like to learn more about this awesome library, visit their official website with documentation, configs and examples here.
Happy coding!
Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland
You may also like...
How to generate PDF from HTML in React / Node.js app
Generating PDFs from HTML can be a challenge, but with the right methods, you can achieve the desired results. Explore different solutions, from using CSS print rules to libraries like html2canvas, jsPDF, and Puppeteer. Understand the pros and cons of each approach to find the best solution for your project. Contact us at hello@start-up.house for more information and assistance. Good luck in your PDF generation endeavors!
Eugene Zolotarenko
May 20, 2021・6 min read
4 reasons to use Chakra UI in your next project
Chakra UI is a simple, modular, and accessible component library for building React apps with speed. With its easy customization, dark mode support, responsive design capabilities, and focus on accessibility, Chakra UI stands out among other UI libraries, making it an excellent choice for React developers.
Mateusz Wójcik
Jan 19, 2021・4 min read
Smart Mirrors in Retail: Enhancing Shopping Experiences with Technology
Smart mirrors are transforming retail stores by offering interactive shopping experiences, virtual try-ons, and personalized recommendations. With features like augmented reality and real-time inventory integration, these technologies enhance customer engagement and streamline the in-store experience.
Alexander Stasiak
May 14, 2024・9 min read
AI Agents for Factory Workflow Optimization
How autonomous agents orchestrate the whole factory — resolving bottlenecks, scheduling maintenance and reallocating resources before output suffers.
Alexander Stasiak
Sep 28, 2026・8 min read
AI Agents ROI: Turning Autonomous Workflows into Measurable Returns
The AI agents conversation has shifted from "what could they do?" to "what did they actually return?" In 2024–2025, production deployments are delivering documented results: 30–60% cost reduction in customer support, 5–10% revenue lift in sales operations, and 40–70% faster cycle times across back-office workflows. This guide breaks down exactly how to measure AI agents ROI, which use cases deliver the strongest payback, and how to design deployments for real business outcomes — not innovation theater.
Alexander Stasiak
Feb 25, 2026・15 min read
AI Agents for Predictive Maintenance and Asset Reliability
How autonomous agents read vibration, thermal and acoustic data to predict failures weeks ahead — and act on them without waiting for a human.
Alexander Stasiak
Aug 29, 2026・9 min read
Recently added
Best enterprise AI companies in Central and Eastern Europe
Selecting a technology partner for enterprise AI implementation requires going beyond the usual software vendor checklist. In the CEE (Central and Eastern Europe) region, providers combine global scale with deep engineering expertise, delivering AI agents and RAG knowledge bases compliant with the EU AI Act and DORA. This article presents a curated list of vetted companies with documented enterprise AI deployments.
Alexander Stasiak
Nov 04, 2026・10 min read
Best AI Companies for Fintech and Insurance (2027)
Choosing a technology partner in regulated industries is a high-stakes decision. If you’re looking for the best AI companies for fintech and insurance in Poland, this guide compares software houses, systems integrators, and software vendors that implement AI agents, RAG knowledge bases, and data analytics for banks, fintechs, and insurers. You’ll find a comparison table, company profiles, DORA, GDPR, and AI Act requirements, the implementation process, and a Startup House case study with hard numbers.
Alexander Stasiak
Nov 03, 2026・12 min read
AI in Food Production: Use Cases and Implementation Partners (2027)
Food manufacturers face short shelf lives, commodity price volatility, and rising demands from retail chains, so AI increasingly supports demand forecasting and production planning. This review covers the state of AI in food manufacturing in 2026–2027, with examples of deployments and implementation partners in Poland. You’ll find a comparison of implementation firms (Startup House, Comarch, Sii Polska, TTMS) and tools (RELEX, o9 Solutions, Kinaxis), the implementation process, risks, and answers to frequently asked questions.
Alexander Stasiak
Nov 02, 2026・11 min read
AI Integration with ERP and CRM (SAP, Comarch, Dynamics): How It Works in Practice (2027)
Integrating AI with ERP and CRM (SAP, Comarch, Dynamics) in practice means choosing one of three models: a vendor-embedded assistant, your own AI layer connected via API, or AI agents operating on your systems via MCP. This guide is for medium and large companies in Poland that want to connect language models (LLMs) to an existing ERP or CRM, including legacy systems. You’ll find a comparison of vendor tools (SAP Joule, Microsoft Dynamics 365, Comarch ERP, Salesforce Agentforce, Oracle NetSuite), options from implementation partners, the implementation process, key risks, and a data-backed case study.
Alexander Stasiak
Nov 01, 2026・13 min read
Business Process Automation with AI Agents: From Workflows to Agents
Business Process Automation with AI Agents: From Workflows to Agents is a guide for mid-market and enterprise companies looking for an implementation partner or a tool to automate their operations. We explain how a deterministic workflow differs from a decision-making AI agent, and compare implementation partners (Startup House, Comarch, WeAreFuture, TTMS) and platforms (n8n, Make, Zapier, Power Automate, Copilot Studio, UiPath, LangGraph, OpenAI Agents SDK). Finally, we outline the implementation process, a Startup House case study, and the risks.
Alexander Stasiak
Oct 31, 2026・11 min read
AI Assistant for Sales and Customer Service: Build Your Own or Copilot?
AI assistant for sales and customer service: build your own or choose Copilot? It’s one of the key decisions facing sales, customer service, and IT teams at mid-sized and large companies today. The choice between an off-the-shelf product like Microsoft 365 Copilot and building your own AI assistant affects deployment speed, data control, and alignment with your company’s processes. In this article, you’ll find a comparison of tools (Salesforce Agentforce, Microsoft 365 Copilot for Sales and for Service, HubSpot, Zendesk, Intercom Fin) and implementation partners, selection criteria, the implementation process, and a Startup House case study.
Alexander Stasiak
Oct 30, 2026・13 min read
Ready to centralize your know-how with AI?
Start a new chapter in knowledge management—where the AI Assistant becomes the central pillar of your digital support experience.
Work with a team trusted by top-tier companies.
