DEV Community: Theophilus K. Dadzie

Mastering TanStack Query for Cleaner Data Fetching

Theophilus K. Dadzie — Fri, 13 Mar 2026 15:36:17 +0000

Modern frontend applications are driven by data. From loading user profiles and paginated content to handling real-time updates, seamless API integration sits at the core of today’s user experiences.

As the React ecosystem has matured, so has the way we approach data fetching. The once common pattern of juggling useState and useEffect is no longer sufficient for modern, scalable applications. As complexity grows, manually managing loading states, error handling, caching, and background updates quickly becomes error-prone and difficult to maintain. To build robust and performant interfaces, developers now need more structured and reliable approaches to managing server data.

Why TanStack Query?

TanStack Query is a powerful data-fetching and caching library for React (and other frameworks) that removes much of the complexity around managing server state. Instead of manually wiring network requests and local state, it gives you a clean, declarative way to work with data from your APIs.

In more technical terms, TanStack Query makes fetching, caching, synchronizing, and updating server state in your web applications a breeze. It handles these concerns automatically and efficiently, ensuring your UI stays in sync with the server while reducing boilerplate and common sources of bugs.

Why TanStack Query Over Traditional Fetching?

The Old Way ❌

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch("/api/users")
    .then(res => res.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

Problems:

Repetitive boilerplate
No caching
No refetching strategy
Hard to scale across components

The TanStack Query Way

const { data, isLoading, error } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
});

That’s it.

Setting Up TanStack Query

Install the library:

npm i @tanstack/react-query

Devtools

npm i @tanstack/react-query-devtools

When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

Wrap your app with QueryClientProvider:

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

const queryClient = new QueryClient();

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
     <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

Fetching Data the Right Way

Let’s fetch a list of users:

hooks/fetchUser.ts

const fetchUsers = async () => {
  const res = await fetch("/api/users");
  if (!res.ok) throw new Error("Failed to fetch users");
  return res.json();
};

const Users = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Something went wrong</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

The queryKey uniquely identifies the data being fetched and is used by TanStack Query to cache, share, and refetch that data across your application. The queryFn is the function that performs the actual API request, while TanStack Query handles when it runs and how the result is kept in sync with your UI.

Why TanStack Query Makes Your Code Cleaner

TanStack Query helps reduce the amount of boilerplate you write by handling data fetching, caching, and updates out of the box. It gives you a predictable data flow, keeps your data fresh with automatic background updates, and makes advanced patterns like pagination and mutations easy to implement.

As a result, your components stay declarative and focused on rendering the UI, while TanStack Query takes care of the underlying data plumbing for you.

🌐 Stop Fighting Next.js Search Params: Use nuqs for Type-Safe URL State

Theophilus K. Dadzie — Mon, 08 Dec 2025 10:02:23 +0000

The Hidden Pain of URL State Management

We all know the scenario: you're building a dashboard, an e-commerce site, or any application with filters, pagination, or search. Where do you store the state for these features?

Local React State? Breaks page reloads and link-sharing (the user loses their filters).
Global State (like Redux/Zustand)? Overkill for simple URL state, adds complexity, and still doesn't automatically sync with the URL.
Manual Next.js useSearchParams? 😩 Tedious string manipulation, no type safety, and you have to manually handle router.push/router.replace with every single change.

In the Next.js App Router era, managing URL search parameters should feel like managing simple React state declarative, type-safe, and without boilerplate. That's exactly what nuqs (React.js URL Query State) delivers.

This article dives into how nuqs turns complex query parameter logic into two lines of beautiful, shareable code.

🛠️ Installation and Setup

Getting started with nuqs is fast. It works natively with the Next.js App Router and even supports React Server Components (RSC) cleanly.

npm install nuqs

For the App Router, you'll want to wrap your root layout with the adapter to ensure all updates work seamlessly:

src/app/layout.tsx

import { NuqsAdapter } from 'nuqs/adapters/next/app'
import { type ReactNode } from 'react'

export default function RootLayout({
  children
}: {
  children: ReactNode
}) {
  return (
    <html>
      <body>
        <NuqsAdapter>{children}</NuqsAdapter>
      </body>
    </html>
  )
}

The Core Idea: useQueryState
The entire power of nuqs comes from one hook: useQueryState. It mirrors the familiar React.useState hook but automatically synchronizes its value with a specific URL search parameter.

Before nuqs

const searchParams = useSearchParams();
const page = Number(searchParams.get("page")) || 1;

// Updating is even worse:
const params = new URLSearchParams(searchParams);
params.set("page", String(page + 1));

router.push(`?${params.toString()}`);

Messy. Repetitive. Bug-prone.

After nuqs

const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(1));

setPage(page + 1);

Clean. Declarative. Beautiful.

Pagination Example

const [page, setPage] = useQueryState(
  "page",
  parseAsInteger.withDefault(1)
);

<button onClick={() => setPage(page + 1)}>Next Page</button>

Simple. State-like. No URL wrangling.

Arrays, Booleans, Enums: No Problem
nuqs includes parsers:

const [tags, setTags] = useQueryState(
  "tags",
  parseAsArrayOf(parseAsString).withDefault([])
);

const [categories, setCategories] = useQueryState(
  "categories",
  parseAsArrayOf(parseAsString).withDefault([])
);

🔬 Advanced Power: Parsing, Debouncing, and Defaults

nuqs provides incredible features that are often required for a polished user experience.

Type-Safe Number Parsing

Query parameters are always strings, but your state should be a number (e.g., for page).

import { useQueryState, parseAsInteger } from 'nuqs';

// URL: /dashboard?page=5
// page is guaranteed to be either a number (5) or null.
const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1)); 
// .withDefault(1) ensures 'page' is always 1 if not present.

This is a massive win for Type Safety and eliminates messy parseInt() logic.

2.⏳ Debouncing URL Updates (Super Useful!)

A search bar is the classic use case for debouncing. You don't want the URL to update or re-fetch data on every keystroke.

import { useQueryState, parseAsString, debounce } from "nuqs";

const [query, setQuery] = useQueryState(
  "q",
  parseAsString.withOptions({
    limitUrlUpdates: debounce(250),
  })
);

This is great for search inputs so you don’t spam history entries.

"use client";
import { useQueryState, parseAsString } from "nuqs";

export default function SearchBox() {
  const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search…"
      className="border px-2 py-1 rounded"
    />
  );
}

The state in your component updates immediately for a smooth input, but the URL only updates when they pause, saving bandwidth and preventing server spam.

3. Managing Multiple Keys with useQueryStates

If you have several related filters (e.g., sort, direction, page), you can update them all at once.

import { useQueryStates, parseAsString, parseAsInteger } from 'nuqs';

const [{ sort, direction }, setQueries] = useQueryStates({
  sort: parseAsString.withDefault('name'),
  direction: parseAsString.withDefault('asc'),
});

// Update both keys in a single, atomic operation:
setQueries({ 
  sort: 'price', 
  direction: 'desc' 
});

Why Choose `nuqs`?

Feature	Next.js Manual Search Params	`nuqs`
Type Safety	No (everything is a string/null)	Yes (parsers guarantee types like `number`, `boolean`, `array`)
Boilerplate	High (manual `URLSearchParams`, `router.replace`)	Low (one hook call per param)
Debouncing/Throttling	Manual implementation required	Built-in as an easy option
SSR/RSC Compatibility	Native but requires manual syncing	Native and handles hydration cleanly
Shareability	Yes	Yes, built-in by design

If you're building stateful, highly interactive Next.js apps in the App Router, nuqs is an absolute game-changer for developer experience. It cleans up your components, simplifies your logic, and makes your application URL-shareable by default.

Mastering Data Fetching in React: A Comprehensive Guide to SWR

Theophilus K. Dadzie — Mon, 16 Oct 2023 11:36:47 +0000

This guide explores the increasing popularity of the SWR library, which stands for "Stale-While-Revalidate." It has become a preferred solution for simplifying data retrieval in React applications. SWR not only represents a clever caching strategy but also offers a powerful and versatile approach to managing data fetching and state control. This comprehensive resource serves as a roadmap for mastering data retrieval within the React ecosystem, with SWR as your trusted ally.

What is SWR?

SWR is a React hook library that has been created by Vercel, the company that also created Next.js. Its major goal is to make data fetching easier by offering a standardised and simple API for handling distant data. SWR adheres to the React hooks principles and uses the browser's cache, which results in a quick and responsive data fetching experience.

Getting Started

To begin using SWR, you will first need to install it in your React project. (As shown in the image below)

pnpm add swr
// OR
npm install swr
// OR
yarn add swr

After installing SWR, import and utilize it in your components.

A request can have three states: "loading", "ready", or "error". The current state can be determined by checking the values of data, error, and isLoading. UseSWR is used to fetch data from the /api/herosection/123 endpoint, and it automatically handles caching, revalidation, and error handling for you. The fetcher function is a callback that you define to retrieve data.

Data Fetching

The SWR API is super important. The fetcher function accepts the SWR key and returns the data. The data is passed as data and if there's an error, it's caught as error. SWR is awesome because you can fetch data using fetch, axios, and even GraphQL! 🚀

Fetch

Axios

GraphQL

Key Features of SWR

SWR has multiple features that make it a potent data fetching tool for React.

Stale-While-Revalidate: SWR uses a "stale-while-revalidate" technique where it provides cached data promptly (even if it's not entirely up-to-date) and then initiates a background request to update the data. This approach guarantees that your user interface remains fast while also keeping the data current.
Caching: SWR has an in-memory cache for data obtained from an API or remote server. This cached data is easily accessible, reducing the need for repetitive server requests. This can improve application performance and decrease server load.
Automatic Data Fetching: SWR caches data in memory, improving application performance and reducing server load by retrieving previously fetched data from the cache instead of making redundant network requests.
Emphasize Reactivity: SWR works seamlessly with React's rendering system, automatically re-rendering components when data changes to ensure that the UI always displays the most up-to-date information.
Error Handling: Error handling is important in data fetching. SWR offers built-in error handling, simplifying the process of showing error messages and recovering smoothly from failed requests.
Global Configuration: SWR configures global options for cache timeouts and error retry strategies to customize its behavior according to your needs.

SWRConfig globally configures SWR's behavior by allowing you to set defaults for fetcher functions, error handling, and other options at the application level.

Advanced Usage of SWR

Although SWR's fundamental usage is straightforward and efficient, its advanced features can be utilized to manage more intricate situations.

Dependency Management: You can pass dependencies to useSWR to trigger a revalidation when specific values change. This is useful when you need to fetch data based on dynamic inputs.

Mutations : SWR has a mutatefunction for triggering revalidation and cache update manually after user actions or mutations.

Conclusion

SWR, or "Stale-While-Revalidate," is a popular tool for efficient data retrieval in React applications. With a user-friendly API, it aligns with React's principles, employs browser caching for speedy data fetching, and offers features like automatic revalidation, caching, and error handling. SWR is a valuable asset for React developers, enhancing performance and usability in a range of project complexities.

Mastering TailwindCSS: Build Stunning Designs with These 5 Pro Tips!

Theophilus K. Dadzie — Sat, 09 Sep 2023 06:25:34 +0000

Tailwind CSS has gained popularity among web developers due to its utility-first attitude and agility in producing cutting-edge user experiences. If you want to increase your understanding of Tailwind CSS, consider these five professional recommendations to help you build stunning designs.

The best practises for utilising Tailwind CSS, a utility-first CSS framework that offers a collection of pre-written classes for decorating HTML elements, are covered in this article. You may use Tailwind CSS to make maintainable, reusable, and Utilising responsive web designs and the following suggested procedures are outlined. Developers that are already familiar with HTML, CSS, and React and want to learn how to leverage Tailwind CSS to create powerful user interfaces should read this article. Basic knowledge of HTML and CSS is required for this topic. The post offers a thorough explanation of the framework even if you are unfamiliar with Tailwind CSS.

i. Understand the Utility-First Paradigm:

Implies that you create components by using small utility classes that specify certain styles. It's crucial to comprehend Tailwind's broad selection of utility classes if you want to grasp this strategy. Your ability to produce accurate, pixel-perfect designs will increase as a result of this knowledge. Test Styles, Padding and Margin, Background and Borders, Flexbox and Alignment, Responsive Design, Typography and Font Styles, Width and Height are some examples that illustrate the utility-first paradigm in Tailwind CSS.

Test Styles: test-{size}, test-{color}.
Flexbox and Alignment: flex, flex-row, flex-col, justify-center, items-center and justify-between.
Responsive Design: sm:(small-screen), md:(medium-screen), lg(large-screen) and xl:(extra-large-screen).
Padding and Margin: pl-{size}(left), pr-{size}, pb-{size}(bottom), pt- {size}(top), mr-{size}(right), ml-{size}, mb-{size}, mt-{size}, px-{size}, py-{size}(top and bottom), mx-{size}(left and write) and my-{size}, where p(padding) and m(margin).
Background and Borders: bg-{color}, bg-cover, bg-contain, border-{width}, border-{color} and rounded-{size}, where bg(background) and b(border).
Typography and Font Styles: font-{weigth} and italic.
Width and Height: w-full, h-full, w-{size} and h-{size}.

The utility-first paradigm has a number of benefits, including:

It makes your code more maintainable and reusable

It helps you avoid CSS bloat

It gives you more control over your designs

It makes it easier to style your elements responsively

ii. Leverage Responsive Design:

Utilising Tailwind CSS makes creating responsive designs quite easy. Make use of the responsive breakpoints that are currently there in order to adapt your designs to different screen widths. Use classes like sm:, md:, lg:, and xl: to control how your components behave on different devices. Remember that a smart responsive design optimises content and user experience for each screen size in along with shifting things around.

.w-2xl make a button wider on larger screens
.hidden-sm hide element on small screens
.mx-auto and .my-auto centers an image on all screen sizes
.flex-row and .w-full make a text input field wider on smaller screens.

iii. Customize and extend:

Tailwind CSS allows you to modify and expand classes to meet the design language of your project, which provides an extensive set of utility classes out of the box. It is beneficial to define custom CSS, use plugins, expand the standard colour palette, and develop your own utility classes.

iv. Component extraction:

In Tailwind CSS, component extraction entails transforming a set of utility classes into a reusable component. This procedure facilitates code sharing between many projects while improving the maintainability and scalability of the code. By utilising the @apply directive, it is possible. This directive makes it possible to combine many utility classes into a single class. As an example, have a look at the following code fragment, which shows how to extract a button component:

You may add a component to your code after extracting it successfully by giving the element the corresponding class name. For instance, using the .button component as shown below will result in the following button:

Class names should be descriptive. Use class names that are descriptive and appropriately reflect the function of your components when giving them names. Your code will be simpler to use and comprehend as a result.
Make sure your parts are compact. small, single-task-focused components are ideal. They will be simpler to comprehend and keep as a result.
Put the @apply directive to use. Another strong feature that may be used to integrate numerous utility classes into one class is the @apply directive. Your code may become clearer and simpler to comprehend as a result.
Run a complete test on your components. Before using your components, make careful to give them a thorough test. You could avoid any unanticipated complications by doing this.

v. Optimization feature:

Tailwind CSS offers optimization tools for project performance, including purging unused styles. By removing utility classes, the resulting CSS file becomes smaller, ensuring only the explicitly applied styles are included. Configuring the build process to enable this feature ensures only the desired styles are included in the final CSS file.

Reduced file size: A leaner CSS file improves user experience by reducing file sizes, resulting in faster loading times on slower networks and devices, especially for users accessing applications from various locations.
Faster loading times: Reduced file size improves application or website loading speed, increasing user engagement and satisfaction.
Bandwidth Savings: Smaller files save bandwidth, benefiting server and user experience, reducing hosting costs.

Tailwind CSS production optimisation has advantages including quicker load times, better performance, and easier maintenance. Understanding Tailwind CSS requires a utility-first approach, responsive design, modifying frameworks, component reuse, and production optimisation. You may harness the power of Tailwind CSS to build effective user interfaces by adhering to these suggestions. To become an expert in Tailwind CSS, you must practise and explore.