Faster Dashboard Navigation with React Query

Release: v0.1.13 · Control: PERF-06

Overview

Version 0.1.13 replaces manual useEffect + fetch() data loading throughout the dashboard with @tanstack/react-query. The result is faster perceived performance, fewer redundant network requests, and instant page transitions when revisiting screens you have already loaded.

The Problem

Before this release, every client component in the dashboard managed its own data fetching lifecycle:

// Previous pattern — repeated in every page component
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

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

This pattern has several well-known limitations:

• Every navigation triggers a full network round-trip. Clicking away from the People list and returning always showed a blank loading state while the request completed.
• No deduplication. If two components on the same screen needed the same data, two requests were made.
• No background refresh. Data shown to the user could become arbitrarily stale with no mechanism to update it.
• Wasted bundle bytes. React Query (@tanstack/react-query) was already listed as a project dependency — the library was being shipped to every user's browser without providing any of its benefits.

The Solution

A QueryClientProvider wrapper has been added at the appropriate layout boundary, and all affected page components have been migrated to useQuery:

// New pattern
import { useQuery } from '@tanstack/react-query';

const { data, isLoading, error } = useQuery({
  queryKey: ['people'],
  queryFn: () => fetch('/api/people').then(res => res.json()),
  staleTime: 30_000, // 30 seconds
});

Cache Configuration

Data	staleTime	Rationale
People list	30,000 ms	Changes infrequently within a session; instant re-navigation
Stats / summaries	60,000 ms	Aggregate figures change slowly; reduce unnecessary recomputation

What You Will Notice

• Instant back-navigation. Returning to the People, Matches, or Billing pages after visiting another part of the dashboard no longer shows a loading spinner — data is served from the in-memory cache and refreshed quietly in the background.
• Fewer network requests. Open your browser's Network tab and you will see significantly fewer API calls during a typical session.
• Automatic freshness. When you switch back to the browser tab after a period away, React Query automatically revalidates stale queries so you always see up-to-date information.

No Breaking Changes

This release is a pure internal refactor. All API endpoints, URL routes, component props, and visible UI behaviour remain identical. No configuration changes are required.