Prefetch Data with React Query to Cut Load Times

Insight

When users tap a list item, the next screen often shows a spinner while data loads. By prefetching the required query before navigation, the target screen can render instantly with cached data, delivering a smoother experience. React Query stores the result in its cache, so the subsequent useQuery call becomes a cache hit and skips the network round‑trip.

Example

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

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

  const onPress = async () => {
    // Prefetch the user details while staying on the list
    await queryClient.prefetchQuery(['user', userId], () => fetchUserDetails(userId));
    navigation.navigate('UserDetail', { userId });
  };

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

Takeaway

Always prefetch the data for the screen you’re about to navigate to. The extra async call happens while the UI is idle, and the destination screen can read from the cache instantly, removing loading spinners and boosting perceived speed.