yuna-c / outsourcing

0 stars 0 forks source link

issue: zustand 무한루프 해결 #32

Open yuna-c opened 1 day ago

yuna-c commented 1 day ago

dev 페이지 pull 받고 나서 zustand에서 받은 값들의 객체를 비구조화할당으로 받고 있었으나, 함수 내부 로직 추가에 의해서 변경된 로직 (useEffect)의 의존성 배열 때문에 무한 루프가 나왔다.

의존성 배열에 포함된 값들이 계속 변경되어 useEffect가 무한히 실행되는 상황이었고, 비구조화 할당 방식에서 객체의 참조가 매번 새로 생성되며 계속 실행 된 것

 const { user, setUser } = useAuthStore((state) => ({
    user: state.user,
    setUser: state.setUser
  }));

개별 추출 방식으로 바꾸어 상태가 변할 때 의존성배열에 포함된 값이 변경 되지 않는 이상 불필요하게 useEffect의 실행을 막아 주었다. 객체 참조의 변형을 피하고 실제 변화에만 반응하게 끔 함

const user = useAuthStore((state) => state.user);
const setUser = useAuthStore((state) => state.setUser);
yuna-c commented 17 hours ago

36

해결 완료