React State Management

Server state is data that lives on the server and needs to stay in sync — fetch it with React Query or SWR, not useState.

import { useQuery } from "@tanstack/react-query";

function UserProfile({ id }: { id: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ["user", id],
    queryFn: () => fetch(`/api/users/${id}`).then(r => r.json()),
    staleTime: 60_000 // cache for 1 minute
  });
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading user.</p>;
  return <h1>{data.name}</h1>;
}

Client state is UI-only data that doesn't need to persist on the server — modal open/closed, selected tab, input value.

// Client state: lives in the component, no server sync needed
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [activeTab, setActiveTab] = useState("overview");

Use SWR for lightweight data fetching with automatic revalidation on focus and reconnect.

import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then(r => r.json());

function Dashboard() {
  const { data } = useSWR("/api/stats", fetcher, { refreshInterval: 30000 });
  return <p>Users: {data?.count}</p>;
}

Avoid duplicating server state in useState — let the fetching library own it and read from its cache.

// Wrong: duplicating server data into local state
const [user, setUser] = useState(null);
useEffect(() => { fetch("/api/me").then(r => r.json()).then(setUser); }, []);

// Right: let React Query own the state
const { data: user } = useQuery({ queryKey: ["me"], queryFn: () => fetch("/api/me").then(r => r.json()) });

Invalidate cache entries after mutations so the UI stays in sync without manual state updates.

const queryClient = useQueryClient();
await updateUser(data);
queryClient.invalidateQueries({ queryKey: ["user", id] }); // refetches automatically

Use functional state updates when new state depends on previous state to avoid stale closures.

// Wrong: may read stale count if React batches updates
setCount(count + 1);

// Right: always uses the latest committed state
setCount(prev => prev + 1);
setItems(prev => [...prev, newItem]);

Batch related state updates with Object.assign or a single state object to avoid extra renders.

// Two setState calls = two renders
setLoading(true);
setError(null);

// One setState call = one render
setState(prev => ({ ...prev, loading: true, error: null }));

Use Zustand's selector to subscribe only to the slice of state a component needs.

const useStore = create((set) => ({
  count: 0, user: null, theme: "light",
  setCount: (n) => set({ count: n }),
}));

// Only re-renders when count changes, not when user or theme changes
const count = useStore(state => state.count);

Derive values during render instead of storing derived state — computed values don't need setState.

// Wrong: storing derived state
const [items, setItems] = useState([]);
const [count, setCount] = useState(0); // always equals items.length

// Right: derive during render
const [items, setItems] = useState([]);
const count = items.length; // computed, always accurate, no sync needed

Use React.memo plus stable callback references to prevent child re-renders from parent state changes.

const handleClick = useCallback(() => dispatch({ type: "SUBMIT" }), [dispatch]);
const ExpensiveChild = React.memo(({ onClick }) => <button onClick={onClick}>Submit</button>);

Create a Zustand store with state and actions in a single create call.

import { create } from "zustand";

const useStore = create<{ count: number; increment: () => void }>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Count: {count}</button>;
}

Use Jotai atoms for fine-grained, component-level shared state without a central store.

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

Use Recoil atoms and selectors to share state and compute derived values declaratively.

import { atom, selector } from "recoil";

const textState = atom({ key: "textState", default: "" });
const charCountState = selector({
  key: "charCountState",
  get: ({ get }) => get(textState).length, // derived from textState
});

Access Zustand state anywhere without wrapping the app in a Provider.

// No <Provider> needed — call the hook directly in any component
function Navbar() {
  const user = useStore((state) => state.user); // selector for one slice
  return <p>Hello {user?.name}</p>;
}

Choose Zustand or Jotai over Redux when you want minimal boilerplate for small to medium apps.

// Redux: actions + reducer + selectors + Provider setup
// Zustand: one create() call, one hook, no Provider required
// Jotai: one atom() call, one useAtom() hook, no Provider required
const theme = useStore((s) => s.theme); // direct selector access