React Query: Server State vs Client State

We used to put everything in Redux. API responses, UI flags, Form state. This was a mistake.

The Separation

• Client State: Ephemeral. “Is the modal open?”. Use `useState`.
• Server State: Persisted remotely. “List of users”. It is asynchronous and stale by definition. Use React Query.

const { data, isLoading, error } = useQuery('users', fetchUsers, {
    staleTime: 60000, // Data is fresh for 1 minute
    cacheTime: 300000 // Keep in memory for 5 minutes
});

React Query handles caching, background refetching (swr), and retries automatically. It deleted 40% of our code when we migrated from Redux Thunks.