Data Fetching Patterns

The evolution from manual useEffect fetching to TanStack Query - caching, refetching, optimistic updates, and why a fetching library beats hand-rolled code.

What it is, in plain English: Fetching data in React starts simple (useEffect + fetch + useState) but quickly needs more: caching so you don't re-fetch the same data, automatic refetching when data goes stale, deduplication of simultaneous requests, retry on failure, and optimistic UI updates. TanStack Query (formerly React Query) is the standard library that handles all of this, turning data fetching from a manual chore into a declarative hook.

Why manual fetching gets complicated fast

The pattern you already know

function UserProfile({ userId }) {
  const [user, setUser]       = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError]     = React.useState(null);

  React.useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err); setLoading(false); });
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error)   return <p>Error: {error.message}</p>;
  return <p>{user.name}</p>;
}
// This works for ONE component. But what happens when:
// - TWO components need the same user data? (duplicate fetches)
// - You navigate away and back? (re-fetches from scratch, no cache)
// - The fetch fails? (no automatic retry)
// - The data changes on the server? (no automatic refresh)

What a data-fetching library adds

// TanStack Query (the most popular choice) — npm install @tanstack/react-query
import { useQuery } from "@tanstack/react-query";

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ["user", userId],    // unique cache key
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error)     return <p>Error!</p>;
  return <p>{user.name}</p>;
}
// Same component logic, but now:
// - cached by queryKey ["user", userId] — instant on revisit
// - if 2 components request the same queryKey simultaneously, ONE request is made
// - automatically refetches when you switch back to the browser tab
// - retries failed requests automatically

Setup -- wrap your app once

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserProfile userId={1} />
    </QueryClientProvider>
  );
}

Try It Yourself (JSX)

// The evolution of data fetching in React

// STAGE 1 -- manual fetch with useEffect (what we've seen so far)
function UserProfileManual({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

React.useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(r => r.json())
      .then(data => { if (!cancelled) { setUser(data); setLoading(false); } })
      .catch(err  => { if (!cancelled) { setError(err);  setLoading(false); } });
    return () => { cancelled = true; };
  }, [userId]);
  // Problems: no caching (re-fetches every mount), no dedup if 2 components
  // request the same data, no automatic retry, manual loading/error wiring every time

if (loading) return Loading...;
 if (error) return Error!;
 return {user.name};
}

// STAGE 2 -- TanStack Query (conceptual -- needs QueryClientProvider setup)
const TANSTACK_EXAMPLE = `
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetch(\`/api/users/\${userId}\`).then(r => r.json()),
  });

if (isLoading) return Loading...;
 if (error) return Error!;
 return {user.name};
}
// Automatic: caching by queryKey, dedup of simultaneous requests,
// background refetch on window focus, retry on failure -- all for free.

return <button onClick={() => mutation.mutate("New Name")}>Update</button>;
}
`;

console.log("Manual fetching works, but doesn't scale. TanStack Query handles:");
console.log("  - caching by query key");
console.log("  - deduplication of simultaneous identical requests");
console.log("  - background refetch on window focus / reconnect");
console.log("  - automatic retry with backoff");
console.log("  - optimistic updates");
console.log(TANSTACK_EXAMPLE.trim());

function App() {
 return <UserProfileManual userId={1} />;
}

Mutations, invalidation, and optimistic updates

useMutation -- for POST/PUT/DELETE requests

import { useMutation, useQueryClient } from "@tanstack/react-query";

function EditUserForm({ userId }) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (updates) =>
      fetch(`/api/users/${userId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updates),
      }).then(r => r.json()),

    onSuccess: () => {
      // Tell TanStack Query this data is stale -- triggers an automatic refetch:
      queryClient.invalidateQueries({ queryKey: ["user", userId] });
    },
  });

  function handleSubmit(e) {
    e.preventDefault();
    mutation.mutate({ name: "New Name" });
  }

  return (
    <form onSubmit={handleSubmit}>
      <button disabled={mutation.isPending}>
        {mutation.isPending ? "Saving..." : "Save"}
      </button>
      {mutation.isError && <p>Failed to save</p>}
    </form>
  );
}

Optimistic updates -- update the UI before the server confirms

const mutation = useMutation({
  mutationFn: (newTodo) => fetch("/api/todos", { method: "POST", body: JSON.stringify(newTodo) }),

  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ["todos"] });
    const previous = queryClient.getQueryData(["todos"]);

    // Optimistically add the new todo BEFORE the server responds:
    queryClient.setQueryData(["todos"], (old) => [...old, newTodo]);

    return { previous };   // saved for rollback
  },

  onError: (err, newTodo, context) => {
    // Roll back if the request fails:
    queryClient.setQueryData(["todos"], context.previous);
  },

  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["todos"] });  // sync with server truth
  },
});
// The UI updates INSTANTLY when the user clicks "add" — no waiting for the
// network round-trip — but rolls back cleanly if the request actually fails.

Stale time and cache time

useQuery({
  queryKey: ["products"],
  queryFn: fetchProducts,
  staleTime: 5 * 60 * 1000,   // data is "fresh" for 5 min — no refetch on remount
  gcTime:   30 * 60 * 1000,   // unused cache entries are garbage-collected after 30 min
});
// staleTime: how long before TanStack Query considers refetching
// gcTime: how long unused data stays in memory before being discarded

SWR vs TanStack Query, and server-state vs client-state

// SWR (by Vercel) -- a lighter alternative with a similar API:
import useSWR from "swr";

function Profile() {
  const { data, error, isLoading } = useSWR("/api/user", (url) => fetch(url).then(r => r.json()));
  if (isLoading) return <p>Loading...</p>;
  if (error)     return <p>Failed</p>;
  return <p>{data.name}</p>;
}
// SWR vs TanStack Query: SWR is smaller and simpler (good for Next.js apps,
// made by the same team). TanStack Query has more features (mutations API,
// devtools, infinite queries, broader framework support beyond React).

Server state is fundamentally different from client state

A key insight behind these libraries: data from a server is server state — it's owned elsewhere, can change without your knowledge, may be stale the moment you receive it, and is shared across users. This is categorically different from client state (form input values, a modal's open/closed flag) which your component fully owns and controls. Using useState/useEffect for server state means reimplementing caching, deduplication, and synchronization from scratch — solved problems that TanStack Query handles declaratively. This is why "do I need Redux?" is often the wrong question — much of what people reach for Redux to manage is actually server state, better handled by a query library, leaving Redux or Context for the smaller amount of genuine client state.

Official Sources

The Codex links only to official documentation. No third-party tutorials.