Prefetch Data with React Query to Speed Up Screen Transitions

Insight

When a user taps a list item, the target screen often waits for a network request before rendering. React Query lets you prefetch that data while the user is still on the list, so the next screen can read from the cache instantly. This pattern reduces the visual loading gap and keeps the UI snappy, especially on slower connections.

Example

// ListScreen.tsx
import { useNavigation } from '@react-navigation/native';
import { useQueryClient } from '@tanstack/react-query';
import { fetchUserDetail } from '../api';

export function ListScreen() {
  const navigation = useNavigation();
  const queryClient = useQueryClient();

  const handlePress = async (id: string) => {
    // Warm the cache before navigating
    await queryClient.prefetchQuery(['user', id], () => fetchUserDetail(id));
    navigation.navigate('UserDetail', { id });
  };

  // ...render list items that call handlePress(id)
}

Takeaway

Always prefetch data for the next screen during idle moments (e.g., onPress) and let React Query serve it from cache. The result is a seamless transition with no extra loading spinner, delivering a native‑like experience.