Prefetch Data with React Query on Navigation for Faster Screens

Insight

When a user taps a list item that opens a detail screen, the UI often shows a spinner while useQuery fetches data. By prefetching the query just before the navigation occurs, the data is already cached, so the detail screen can read it instantly. React Query’s prefetchQuery runs in the background and respects the same cache policies you use elsewhere, making it a zero‑cost addition to most flows. Pair this with React Navigation's beforeRemove or focus listeners to trigger the prefetch at the optimal moment.

Example

import { useNavigation } from '@react-navigation/native';
import { useQueryClient } from '@tanstack/react-query';

function ListItem({ id }: { id: string }) {
  const navigation = useNavigation();
  const queryClient = useQueryClient();

  const handlePress = () => {
    // Warm the cache for the detail screen
    queryClient.prefetchQuery(['item', id], () => fetchItem(id));
    navigation.navigate('Detail', { id });
  };

  return <Button title="Open" onPress={handlePress} />;
}

Takeaway

Trigger prefetchQuery right before navigation and your detail screens will render with data instantly, turning perceived load time into a non‑issue and keeping the UI snappy.