Hook의 규칙

Issue

custom hook으로 query문 api 호출을 관리하다보니 비동기 이슈가 생겼다.
파라미터 값이 들어오기 전에 custom hook에서 query 문을 호출하게되어 페이지의 데이터가 렌더링 되지 않은 화면이 보여졌다.

원인

custom hook의 호출방식을 이해한다면 원인을 알 수 있다.

'최상위(at the Top Level)에서만 Hook을 호출해야 합니다'

Hook의 규칙 중 하나이다.
이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook이 호출되는 것이 보장된다. 즉, React는 hook이 호출되는 순서에 의존한다. 모든 렌더링에서 hook의 호출 순서가 같기 때문에 올바르게 동작한다고 한다.

예를들어, 조건문 안에서 hook을 사용한다면 조건에 따라 실행 순서가 달라지기 때문에 hook의 호출 순서가 달라지게 된다. 그 상태에서 state 가 예상과 달라질 수 있고, hook의 순서가 밀리면서 버그를 발생시킨다고 한다.

결론적으로 hook은 이러한 규칙 때문에 react component 최상단에서 호출이 되어야 하고, 컴포넌트가 렌더링되면 무조건 호출할 수 밖에 없다. 따라서 새로운 state가 업데이트 되기 전에 hook에 있는 api 호출 함수가 먼저 실행되어버려 파라미터를 제대로 전달하지 못한 채로 호출되는 것이다.

해결

export default function useBuildingInfoSettingsQuery({ buildingId }: { buildingId: number }) {
  const { data, error, isLoading, refetch } = useQuery({
    queryKey: [BUILDING_INFO_SETTINGS_QUERY_KEY],
    queryFn: async () => await (buildingId && callGetBuildingSettingsApi(buildingId)),
    enabled: !!buildingId,
  });

  if (isLoading || error) {
    return { data: null, error, isLoading };
  }

  return { data, error, isLoading, mutateData: refetch };
}

• 파라미터가 있을 때만 api call 함수가 실행되도록 조건식 추가

• buildingId가 true일 때만 enabled 가능하게 설정

  
  
  

참고
공식문서