React 컴포넌트가 무한 리렌더됩니다 — Zustand store 구독

Question

Zustand store를 구독하는 컴포넌트에서 무한 리렌더가 납니다.

const { user, posts } = useStore((s) => ({ user: s.user, posts: s.posts }))

Warning: Maximum update depth exceeded.

이렇게 객체로 여러 값을 꺼내는데 뭐가 문제일까요?

김영삼 · Accepted Answer

selector가 매 렌더마다 새 객체({ user, posts })를 반환해서입니다. Zustand는 기본적으로 selector 결과를 Object.is로 비교하는데, 새 객체는 항상 "달라졌다"로 판정 → 리렌더 → 또 새 객체 → 무한 루프. 해결 1) 값마다 따로 구독(가장 단순) const user = useStore((s) => s.user) const posts = useStore((s) => s.posts) 해결 2) 여러 값을 묶어야 하면 얕은 비교 사용 import { useShallow } from 'zustand/react/shallow' const { user, posts } = useStore( useShallow((s) => ({ user: s.user, posts: s.posts })) ) useShallow가 객체의 1단계 필드를 얕게 비교해, 내용이 같으면 리렌더하지 않습니다. 대부분은 "값마다 따로 구독"이 가장 깔끔하고, 묶음이 필

react_hoon · Answer

useShallow로 감싸니 바로 멈췄습니다. 새 객체 참조가 매번 달라서였군요. 감사합니다!

댓글 0