Fetching data in React is something every developer does, but the approach you take dramatically affects maintainability, performance, and developer experience.
A common pattern is using useEffect with async/await. It’s simple but quickly becomes limiting:
1import { useState, useEffect } from "react"; 2 3interface User
For small demos this is fine. For production apps, it quickly becomes unmanageable.
Dedicated libraries abstract away repetitive fetching logic and add caching, invalidation, background updates, and mutation support. Here’s a rundown of the main options.
TanStack Query is a feature-rich solution for server state management:
1import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; 2 3interface User { 4 id: number; 5 name: string; 6} 7 8function UserList() { 9 const queryClient = useQueryClient(); 10 11 const { data: users, isLoading, error } = useQuery<User[], Error>( 12 ["users"], 13 async () => { 14 const res = await fetch("/api/users"); 15 if (!res.ok) throw new Error("Network error"); 16 return res.json(); 17 } 18 ); 19 20 const addUser = useMutation<User, Error, { name: string }>( 21 async newUser => { 22 const res = await fetch("/api/users", { 23 method: "POST", 24 body: JSON.stringify(newUser), 25 headers: { "Content-Type": "application/json" }, 26 }); 27 if (!res.ok) throw new Error("Failed to add user"); 28 return res.json(); 29 }, 30 { 31 onSuccess: () => queryClient.invalidateQueries(["users"]), 32 } 33 ); 34 35 if (isLoading) return <p>Loading...</p>; 36 if (error) return <p>Error: {error.message}</p>; 37 38 return ( 39 <div> 40 <ul> 41 {users?.map(user => ( 42 <li key={user.id}>{user.name}</li> 43 ))} 44 </ul> 45 <button onClick={() => addUser.mutate({ name: "New User" })}> 46 Add User 47 </button> 48 </div> 49 ); 50}
Advanced Features:
SWR is lightweight and focuses on simplicity:
1import useSWR from "swr"; 2 3interface User { 4 id: number; 5 name: string; 6} 7 8const fetcher = async (url: string): Promise<User[]> => { 9 const res = await fetch(url); 10 if (!res.ok) throw new Error("Network error"); 11 return res.json(); 12}; 13 14function UserList() { 15 const { data: users, error, mutate } = useSWR<User[]>("/api/users", fetcher); 16 17 const addUser = async () => { 18 await fetch("/api/users", { 19 method: "POST", 20 body: JSON.stringify({ name: "New User" }), 21 headers: { "Content-Type": "application/json" }, 22 }); 23 mutate(); // revalidate cache 24 }; 25 26 if (!users) return <p>Loading...</p>; 27 if (error) return <p>Error: {error.message}</p>; 28 29 return ( 30 <div> 31 <ul> 32 {users.map(user => ( 33 <li key={user.id}>{user.name}</li> 34 ))} 35 </ul> 36 <button onClick={addUser}>Add User</button> 37 </div> 38 ); 39}
Key SWR Features:
mutate().RTK Query is perfect if your project already uses Redux:
1// apiSlice.ts 2import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; 3 4interface User { 5 id: number; 6 name: string; 7} 8 9export const api = createApi({ 10 reducerPath: "api", 11 baseQuery: fetchBaseQuery({ baseUrl: "/api" }), 12 tagTypes: ["Users"], 13 endpoints: builder => ({ 14 getUsers: builder.query<User[], void>({ 15 query: () => "users", 16 providesTags: ["Users"], 17 }), 18 addUser: builder.mutation<User, Partial<User>>({ 19 query: newUser => ({ 20 url: "users", 21 method: "POST", 22 body: newUser, 23 }), 24 invalidatesTags: ["Users"], 25 }), 26 }), 27}); 28 29export const { useGetUsersQuery, useAddUserMutation } = api; 30 31 32function UserList() { 33 const { data: users, isLoading } = useGetUsersQuery(); 34 const [addUser] = useAddUserMutation(); 35 36 if (isLoading) return <p>Loading...</p>; 37 38 return ( 39 <div> 40 <ul> 41 {users?.map(user => ( 42 <li key={user.id}>{user.name}</li> 43 ))} 44 </ul> 45 <button onClick={() => addUser({ name: "New User" })}>Add User</button> 46 </div> 47 ); 48}
Why RTK Query is powerful:
invalidatesTags.useEffect + fetch works for small apps but doesn’t scale.Switching from useEffect to a dedicated solution reduces boilerplate, makes your components simpler, and gives your users a faster, more consistent experience.