[React] 비동기로 state 변경할 때 주의할 점

🎀 문제 상황 직면

위 gif를 한번 확인해 보세요.

• 더보기 버튼 클릭
• Slow 3G(개발자 도구 Network에서 No throttling → Slow 3G로 변경)라 불러오기까지 시간이 오래걸린다.
  그 사이에 마지막 영화 항목인 "기도하는 남자"를 삭제해 보았다.
• 더보기에 해당하는 데이터가 다 불러와지자, 삭제했던 항목이 다시 보여진다.

🎀 위와 같은 버그가 생기는 이유

const [items, setItems] = useState([]);

const handleDelete = (id) => {
  const nextItems = items.filter((item) => item.id !== id);
  setItems(nextItems);
};

const handleLoad = async (options) => {
  const { reviews, paging } = await getReviews(options);
  if (options.offset === 0) {
    setItems(reviews);
  } else {
    setItems([...items, ...reviews]);
  }
  setOffset(options.offset + reviews.length);
  setHasNext(paging.hasNext);
};

await getReviews(options);가 완전히 실행되기 이전에 삭제가 진행되었으니까
handleLoad에는 기본적으로 삭제 이전의 items값이 저장되어 있다 보면 된다.
그래서 버그가 생기는 것이다!

🎀 해결법

setItems((prevItems) => [...prevItems, ...reviews]);

이전 state 값을 받아서 콜백으로 넘겨주면 간단하게 해결된다.