2. 리액트 에러. Maximum update depth exceeded
- 에러 발생한 상황
const { handleAllCheckboxChange, handleCheckboxChange } = useMultiCheckbox({
initialCheckedItemId: selectedItem,
items: order?.items ?? [],
setCheckedItemIds,
});
// useMultiCheckbox 훅 내부 useEffect
useEffect(() => {
if (!initialCheckedItemId) {
return;
}
const newCheckedItemIds = new Set<string>();
items.forEach((item) => {
if (item._id === initialCheckedItemId) {
newCheckedItemIds.add(item._id);
}
});
setCheckedItemIds(newCheckedItemIds);
}, [items, initialCheckedItemId]);
-
여기에서 items 에 오른쪽에 주입한
[]은 배열(참조형) 이라서 매번 새로운 값(주소가 다르므로)이라고 인식함 -> 그래서 useEffect 가 실행됨 -> 그런데 새로운값이 아님 -> 리액트가 머라구 함- 따라서 해당 컴포넌트 내 다른 값들 변경될 때에도 items 에 주입된 [ ] 가 새로운 값이라고 판단해서 계속 해당 훅 리렌더링..!!
-
해결 방법
const confirmableItems = useMemo(() => {
if (!order) {
return [];
}
return order.items.filter((item) => item.status === LINE_ITEM_STATUS.fulfillmentArrived.id);
}, [order]);
const [checkedItemIds, setCheckedItemIds] = useState(new Set<string>());
const { handleAllCheckboxChange, handleCheckboxChange } = useMultiCheckbox({
initialCheckedItemId: selectedItem,
items: confirmableItems,
setCheckedItemIds,
});
- items 에 들어갈 배열을 useMemo 로 기억해줌