이전 state에 의존하는 state update 시 주의점

이전 state에 의존하는 state update 시 주의점

state update 할 때 새 state가 이전 state에 의존한다면 반드시 setState 함수의 인자에 함수를 넣어야 한다.

원인

• 리액트 state의 업데이트는 일괄 처리(batched) 될 수 있다.
• setState인자에 함수를 넣지 않는다면 예상치못한 결과를 불러 일으킬 수 있다.
• state가 여럿일 경우에 다른 state의 변화로 리렌더링이 거의 동시에 이루어지거나 하게 되면 useState 왼쪽의 state가 이전의 값임을 보장할 수 없을 때가 있다.
• state의 변화가 비동기적으로 일어나기 때문이다. (scheduler에 대해서 알아보기)
  • setState가 호출되면 바로 state가 바뀌는 게 아니라 리액트에게 변경해야할 state를 알려주는 것이고
  • 리액트는 다른 state의 변경 요청까지를 다 받은 다음 한 번에 묶어서 state를 변경하여 리렌더링시킨다.
  • (promise나 setTimeout 등을 제외하고 그 안에 실행된 모든 state들을 하나로 묶는다.)

→ state의 업데이트가 이전의 값에 의존하는 경우 반드시 setState 함수의 인자에 함수를 넣어야 한다. 그래야만 함수에서 받는 인자가 이전의 값임을 장담할 수 있다.

 

잘못된 예시

const [count, setCount] = useState(0);
const [open, setOpen] = useState(false);

/* ... */

setCount(state + 1);
setOpen(!open);

 

좋은 예시

const [count, setCount] = useState(0);
const [open, setOpen] =useState(false);

setCount(count => count + 1);
setOpen(open => !open);

 

참고문서 https://jae04099.tistory.com/203, https://thinkforthink.tistory.com/367