이번 회고에서는 MenuPage에서 발생한 "Maximum update depth exceeded" 오류를 집중적으로 분석하고, 그 원인과 해결 과정을 정리합니다.
MenuPage)가 렌더링 도중 ErrorBoundary에 걸려 fallback UI가 표시됨Maximum update depth exceededThe result of getSnapshot should be cached to avoid an infinite loopuseCartStore(state => state.getTotals(menuItems, options))
이 코드는 매번 새로운 { totalCount, totalPrice } 객체를 반환합니다.
React 18+의 내부 동작(useSyncExternalStore)은
selector가 반환하는 값이 이전 값과 다르면(얕은 비교),
"상태가 바뀌었다"고 판단해서 컴포넌트를 다시 렌더링합니다.
그런데 selector가 항상 새 객체를 반환하면,
React는 "상태가 계속 바뀐다"고 생각해서 무한 렌더링 루프에 빠집니다.
Maximum update depth exceeded 에러가 발생했습니다.zustand에서 items만 selector로 가져오고
실제 계산은 useMemo로 감싸서
items/menuItems/options가 바뀔 때만 새 객체를 반환하도록 변경
수정 예시: