useNavigate 로 인한 렌더링 문제

[여행역할] 이라는 사이드 프로젝트를 진행하며 겪은 오류

현재 나는 React 를 사용하며 사이드프로젝트 프론트쪽을 맡아서 하고 있는데, 서버에서 데이터를 요청해 계속해서 여행 계획에 대한 데이터들을 보여줘야하는 상황이였다.

여행계획을 세우는 방으로 입장을 했을 때, useNavigate를 사용해서 라우터 이동을 했는데 axios 요청보다 더 빠르게 페이지가 이동되어서 렌더링에 문제가 생기게 되었다.

그래서 페이지가 이동하기 전에, 여행 계획 데이터를 먼저 받고 페이지가 이동될 수 있도록 코드를 구현했더니 렌더링에 문제 없이 잘 작동하는 걸 확인할 수 있었다.

하지만 이게 좋은 코드인가? 라고 생각해보면 좋아보이지 않는다..

const handleInRoom = useCallback(() => {
  dispatch(getRoomData(roomId))
    .then(() => dispatch(getSidebarData(roomId)))
    .then(() => dispatch(getAllPlanList(roomId)))
    .then(() => navigate(`/${roomId}/allplan`))
}, [dispatch, navigate, roomId]);

이런 생각이 자꾸만 드는건 내가 아직 공부가 부족하다는 뜻이겠지 ㅎㅎ..