Client State vs Server State - Jotai and TanStack Query Instead of Redux Toolkit

Table of Contents

• Introduction
• Why Not Redux Toolkit?
• Should You Use Only TanStack Query?
• Quick Comparison
• Conclusion

Introduction

TL;DR: use Jotai or Zustand for client state and TanStack Query for server state. Treating both as the same problem is what makes Redux Toolkit setups grow complicated.

Current versions:

1
{
2
  "jotai": "^3.0.0",
3
  "@tanstack/react-query": "^5.103.2"
4
}

• Jotai: primitive, atom-based state for React. No reducers, no action types.
• TanStack Query: async state management with caching, retries, and background refetching for anything that comes from a server.

Why Not Redux Toolkit?

Jotai plus TanStack Query is a lighter alternative to Redux Toolkit for most apps. Redux Toolkit still does its job, but two things add friction once a codebase grows past a handful of features: a single global store that every slice has to register with, and a thunk-based async layer that duplicates what TanStack Query already does better, namely caching, deduping in-flight requests, and retrying failed calls.

If your app already has a large Redux Toolkit store with RTK Query, migrating away is not automatically a win. The point here is for new projects, or projects where server state is currently jammed into slices and reducers.

Should You Use Only TanStack Query?

If you know TanStack Query well, it can act as your only state layer, including state that never touches a server. Store it with a query whose queryFn never actually fetches, as shown below. This works, but it means every consumer needs to understand TanStack Query’s cache semantics even for state that has nothing to do with a server, which is a real cost for team onboarding.

Quick Comparison

Client-side state with Jotai:

1
const outputDatetimeAtom = atom("");
2
const inputIncludesTimezoneAtom = atom(false);
3

4
const [outputDatetime, setOutputDatetime] = useAtom(outputDatetimeAtom);
5
const [inputIncludesTimezone, setInputIncludesTimezone] = useAtom(
6
  inputIncludesTimezoneAtom
7
);

Non-server global state modeled through TanStack Query’s cache:

1
import { useOutputDatetimeState } from "./state/useOutputDatetimeState";
2

3
export default function App() {
4
  const { setData: setOutputDatetimeData, resetData: resetOutputDatetimeData } =
5
    useOutputDatetimeState();
6
  // ...
7
}

1
import { createGlobalState } from "./createGlobalState";
2

3
type OutputDatetimeState = {
4
  convertedDatetime: string;
5
};
6

7
export const useOutputDatetimeState = createGlobalState<OutputDatetimeState>(
8
  "outputDatetimeState",
9
  { convertedDatetime: "" }
10
);

1
import { useQuery, useQueryClient } from "@tanstack/react-query";
2

3
export function createGlobalState<T>(
4
  queryKey: unknown,
5
  initialData: T | null = null
6
) {
7
  return function () {
8
    const queryClient = useQueryClient();
9

10
    const { data } = useQuery({
11
      queryKey: [queryKey],
12
      queryFn: () => Promise.resolve(initialData),
13
      gcTime: Infinity, // renamed from cacheTime in TanStack Query v5
14
      refetchInterval: false,
15
      refetchOnMount: false,
16
      refetchOnWindowFocus: false,
17
      refetchOnReconnect: false,
18
      refetchIntervalInBackground: false,
19
    });
20

21
    function setData(newData: Partial<T>) {
22
      queryClient.setQueryData<T | undefined>([queryKey], (oldData) => ({
23
        ...(oldData || {}),
24
        ...newData,
25
      }));
26
    }
27

28
    function resetData() {
29
      queryClient.invalidateQueries({ queryKey: [queryKey] });
30
      queryClient.refetchQueries({ queryKey: [queryKey] });
31
    }
32

33
    return { data, setData, resetData };
34
  };
35
}

cacheTime was renamed to gcTime in TanStack Query v5; the old name is silently ignored, so if a v4 snippet like this stops working after an upgrade, that rename is the first thing to check.

Conclusion

Splitting client state and server state into Jotai and TanStack Query respectively removes a category of Redux Toolkit boilerplate: no slices, no thunks, no manual cache invalidation logic. Each library does the part of state management it is actually good at.

If you are taking this into production, the next steps below cover auth, data and observability, and the newsletter is where the Astro SaaS boilerplate ships first.