Data Fetching in React: The Complete Beginner Series

Fetching data is one of the most important parts of any React project, whether you’re displaying users, products, or images from an API.

In this 4-part mini-series, we’ll explore four key ways to fetch data in React from the most basic to the more advanced approaches. Each builds on the previous one, helping you understand not only how to fetch data but also why certain tools are worth adopting.

Here’s what we’ll cover:

1. Fetch API — The simple, built-in way

2. Axios — A cleaner, more powerful HTTP client

3. SWR — Smart caching with “Stale While Revalidate”

4. React Query — Full-featured server-state management

1. FETCH API
   If you’re new to fetching data in React, the Fetch API is the best place to start. It’s built into JavaScript, easy to use, and helps you understand how promises and JSON responses work together.

   👉 Read: Part 1 — Understanding the Fetch API in JavaScript

   Next up: we’ll explore Axios, a powerful alternative that simplifies data fetching with more flexibility and better error handling.

2. AXIOS

   Axios is one of the most popular HTTP clients for JavaScript. It makes requests simpler and automatically handles JSON transformation. It’s also more convenient for complex requests like POST, PUT, or DELETE.

   👉 Read: Part 2 — Using Axios to Fetch Data

   Next up: let’s take a look at SWR, a modern library that brings caching and revalidation to your data-fetching workflow.

3. SWR (Stale While Revalidate)

   SWR is both a strategy and a library that helps you fetch and manage data efficiently. It automatically caches and revalidates data behind the scenes, removing the need for manual state or effect management.

   You can easily use it with the Fetch API or Axios and pair it with React’s Suspense for smooth loading states.

   👉 Read: Part 3 — Fetching Data in React with SWR

   Next up: In our final part, we’ll dive into React Query, a full-featured library that handles caching, synchronization, and background updates, perfect for complex or data-heavy apps.

4. REACT QUERY
   React Query is a powerful library that simplifies data fetching and state management in React applications. It takes care of caching, background updates, and keeping your UI in sync with the server, all without you having to manually manage useState or useEffect.

   Like Axios and SWR, you’ll need to install it first before using it:

    yarn add react-query; or
    npm install react-query
   

   Once installed, you start by importing the QueryClient and QueryClientProvider from the React Query library. You’ll then create a new query client and wrap your entire app with the provider, giving React Query control over all data fetching across your components.

   Here’s an example setup:

    import React, { Suspense } from "react";
    import { QueryClient, QueryClientProvider } from "react-query";
   
    const client = new QueryClient({
      defaultOptions: {
        queries: {
          suspense: true,
        },
      },
    });
   
    function ReactQuery() {
      return (
        <QueryClientProvider client={client}>
          <Suspense fallback={<h1>Loading...</h1>}>
            <Dog1 />
            <Dog2 />
          </Suspense>
        </QueryClientProvider>
      );
    }
   
    export default ReactQuery;
   

   What’s happening here is simple:
   React Query handles your API calls, manages loading and error states, and automatically updates or caches your data. You don’t have to set up a useEffect or manually track the response — React Query takes care of all that internally.

   It also works perfectly with React’s Suspense feature that allows you to show a loading state while waiting for your data. And the best part? If multiple components need the same data, React Query will fetch it once and serve it from cache, improving performance.

   This makes it one of the most efficient and developer-friendly solutions for data fetching in modern React applications.

   Pro Tip: React Query isn’t just for fetching data; it can also handle mutations (POST, PUT, DELETE requests), invalidate caches, and synchronize server state automatically.

   👉 Read: Part 4 — React Query for data fetching.

   Wrapping Up: Choosing the Right Tool for Data Fetching in React

   We’ve come a long way exploring four different ways to fetch data in React, from the simplicity of the Fetch API, to the structure of Axios, the flexibility of SWR, and the power of React Query.

   Each of them has its strengths:

   • Fetch API → The most basic and native way. No installations, just pure JavaScript. Perfect for small projects or when you want full control.

   • Axios → A step up from Fetch. It simplifies syntax, automatically transforms data into JSON, and handles errors gracefully.

   • SWR → Lightweight and reactive. It manages caching, revalidation, and state internally, perfect for modern, efficient front-end apps.

   • React Query → The powerhouse. It manages data fetching, caching, and background updates across your app, ideal for large-scale projects where performance and synchronization matter.

At the end of the day, all four serve the same goal of getting data into your React app.
The difference lies in how much control or automation you want.

If you’re just starting, try Fetch API or Axios.
When you’re ready for smoother caching and real-time revalidation, SWR is just the right one.
And when your app grows in size and complexity, React Query is a suitable choice.

The beauty of React is that it gives you options, so you can choose what fits your project, your team, and your workflow best.

💡 Series Recap:
1️⃣ Fetching Data with the Fetch API
2️⃣ Fetching Data Using Axios
3️⃣ Fetching Data Using SWR
4️⃣ Fetching Data Using React Query

Thank you for reading!✨

I hope this series helped you understand data fetching more clearly and gave you the confidence to choose the right approach for your next React project.