[Next.js] Error: Rendered more hooks than during the previous render.

💥 Error: Rendered more hooks than during the previous render.

문제 발생
마이 페이지 제작 중, 사용자가 작성한 게시글을 불러오기 위해 tanstackQuery 를 사용하여 user정보와 post 정보를 가져오려고 했음
usePostByUser(user.id) post를 요청할 때 user id가 필요해서 useSession으로 먼저 user 정보를 받고 user.id를 넣으려고 했음

그런데

const {data: user} = useSession();
const {data: posts} = usePostByUser(user.id);

이렇게 하니까 Cannot read properties of undefined (reading 'getUser') 오류가 발생함
user 받아오기 전에 posts 요청이 가서 user가 없다고 나옴

그럼 user가 있을 때만 posts 요청을 받아야하나 싶어서

const {data: user, isLoading, isError} = useSession();

if (!user || isLoading || isError) {
  return ;
}

const {data: posts} = usePostByUser(user.id);

이렇게 수정했더니 해당 오류가 발생했습니다~

문제 원인
React는 Hook이 호출되는 위치를 중요하게 생각하는데, 규칙을 어길 경우 발생하는 오류입니다!

오류가 발생하는 대표 상황
1. 조건부로 Hooks 호출
2. 반복문 또는 이벤트 핸들러에서 Hooks 호출
3. 조건에 따라 Hook 추가 및 제거

그러니까 꼭 최상단에 두개를 연달아 불러오고 처리해야한다는 말.

문제 해결
조건문을 사용하지 않고 user, post 요청을 처리할 수 있는 방법 enabled, useEffect, 상위에서 요청하고 props 내리기 등 중에서 enabled 옵션을 추가하는 것으로 해결했다.

export const usePostByUser = (userId: string | undefined) => {
  return useQuery({
    queryKey: ["post", userId],
    queryFn: () => fetchPostByUser(userId),
    retry: 1,
    enabled: !!userId, // userId가 있을 때만 요청 실행
  });
};

  const { data: user } = useSession();
  const { data: posts, isLoading } = usePostByUser(user?.id);