I am using React Query to manage server state for a user management page. Users can update profile information through a form, and after a successful update I invalidate the related query so that fresh data is fetched from the server.
My expectation is that the UI should immediately reflect the updated user data after the mutation succeeds. However, I sometimes see old values rendered in the UI for a short period, even though the network tab shows that a new request has been made.
This is a simplified version of my implementation:
const queryClient = useQueryClient();
const updateUser = useMutation({
mutationFn: updateUserApi,
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['users']
});
}
});
const { data } = useQuery({
queryKey: ['users'],
queryFn: fetchUsers
});
The query is successfully invalidated and a refetch occurs. However, the component sometimes continues displaying stale data until the refetch completes.
I have reviewed the React Query documentation regarding stale data, cache invalidation, and refetching, but I am still unsure why the previous data remains visible in the UI.
What are the common causes of this behavior, and what is the recommended way to ensure that users see the updated data immediately after a successful mutation?