Code Quiz

React Query Stale Cache Key Bug

A missing dependency in a React Query key causes server-state to go stale across users.

Codetypescript

// Team chose React Query for server-state instead of Redux/Zustand,
// arguing caching + refetch belongs to the server-state layer.
function useUserProfile(userId: string) {
  return useQuery({
    queryKey: ['userProfile'],
    queryFn: () => fetchUserProfile(userId),
    staleTime: 60_000,
  });
}

function ProfileScreen({ userId }: { userId: string }) {
  const { data } = useUserProfile(userId);
  return <ProfileView profile={data} />;
}

What is the bug in this code?

Next →Server State vs Client State Management