React · Урок 54

Состояние: React Query, Zustand

Состояние бывает двух видов: серверное (данные с API) и клиентское (ui-флаги, корзина). Для каждого — свой инструмент, а не «голый» useEffect + useState.

React Query: серверное состояние

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

function Posts() {
  const { data, isLoading, refetch } = useQuery({
    queryKey: ["posts"],
    queryFn: () => fetch("/api/v1/posts").then(r => r.json())
  });
  // кэш, refetch при фокусе окна, статусы — из коробки
}

Zustand: клиентское состояние

import { create } from "zustand";

export const useCart = create((set) => ({
  items: [],
  add: (id) => set((s) => ({ items: [...s.items, id] })),
  reset: () => set({ items: [] })
}));

// в компоненте:
const items = useCart((s) => s.items);
ℹ️
Redux тоже жив и работает, но для 90% приложений Zustand/React Query дают тот же результат с десятой частью кода. На собеседовании достаточно уметь объяснить разницу серверного и клиентского состояния.
💡
Правило-ориентир: если данные пришли с сервера — React Query; если локальный флаг/настройка — useState или Zustand; если и то и другое — подумайте, что лишнее.