[React] useState : Batch Update

한별·2024년 5월 22일

React

목록 보기
5/12

다음과 같이 state를 바꾸는 경우, count는 총 3번 증가했지만
마지막 하나만 실행된다. 왜일까ㅏㅏ??

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

성능을 위해서이다.
불필요한 렌더링을 방지하고 렌더링을 최적화하기 위해서
React는 state 변경사항을 모아서 한꺼번해 처리하는 방법을 채택하고 있다.

하지만 함수형 업데이트로 작성하면 모든 setState를 실행할 수 있다

setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
profile
글 잘 쓰고 싶어요

0개의 댓글