react-data-fetching

To fix React request waterfalls, you parallelize independent fetches using Promise.all and restructure component trees so child requests do not wait on parent results unnecessarily. This reduces total page latency by eliminating sequential data loading.

Set up TanStack Query caching by replacing fetch-in-effect patterns with deduplicated cached queries, then wrap component trees in Suspense boundaries for declarative loading. This standardizes error and loading states while removing UI jank during navigation.

The best way to handle optimistic updates is to apply mutation patterns that instantly update the UI while reconciling with server truth using query invalidation. This makes mutations feel instant without losing data consistency.

Yes, it works by refactoring existing component trees that load server data. You identify sequential requests and fetch-in-effect patterns, then replace them with parallel query execution and caching to remove redundant client fetching.

Redundant network calls happen when components fetch the same data independently without a dedicated data layer. You stop it by enabling deduplicated cached queries with background revalidation, ensuring requests are shared and reused across the app.

You should prefetch data on navigation intent to remove UI jank during route changes. By coordinating loading with Suspense boundaries and prefetching, you ensure data is ready before the component renders, preventing loading flashes.