현상

• useQuery를 통해 data를 사용할 떄, 다른 컴포넌트에서 같은 훅 사용 시 자동으로 refetching 됨.
• 그로 인해 isFetching이 true로 변하고, 이것떄문에 기존 컴포넌트가 또 리마운트되면서 무한 루프가 발생하는 경우가 있음.

해결

• refetchOnMount 옵션을 false로 주면됨 (디폴트 true)

export function useUserDetailAll(options?: { refetchOnMount?: boolean }) {
  const { data, isPending, isFetching, refetch } = useQuery<UserDetail[]>({
    queryKey: ["user-detail-all"],
    queryFn: fetchUserDetailAll,
    refetchOnMount: options?.refetchOnMount, // <- here
  });

  return {
    userDetailAll: data,
    refetchUserDetailAll: refetch,
    isUserDetailAllPending: isPending,
    isUserDetailAllFetching: isFetching,
  };
}