🤿 setState의 비동기성

setState는 비동기적으로 작동한다.

이유

그 이유는 이전 state와 다음 state를 비교하며 리렌더링을 하는 게 비용이 큰 작업이기 때문이다.

setState를 통해 새로운 state로 업데이트하는 작업을 연달아 3번 발생시켰다고 가정해보자.

const handleClick = () => {
  setState(count + 1);
  setState(count + 1);
  setState(count + 1);
}

이런 작업에서 리액트는 재조정을 통한 리렌더링을 3번 발생시키지 않는다. 리액트는 똑똑한 라이브러리이기 때문이다.

최후의 작업만 리렌더링하는 게 비용이 적다는 걸 알고 있다.

문제는 개발자의 의도와는 다른 결과를 불러올 수 있다는 위험성이다. 위의 예시에서 count는 기존의 count에서 +3된 값이 아닌 +1로만 state가 설정된다.

해결책

const handleClick = () => {
  setState(prev => count + 1);
  setState(prev => count + 1);
  setState(prev => count + 1);
}

다음과 같이 함수를 전달해주면 간단하게 해결할 수 있다.

const handleClick = () => {
  setState(prev => count + 3);
}

물론 애초에 setState를 여러 번 호출할 일이 없도록 하는게 더 좋다.

주관적인 의견

setState가 비동기적으로 발생하는 원리에 대해 조금 조사해봤다.

일단 공식문서에는 setState가 비동기적으로 작동하니 사용에 유의하라는 말과 해결방법이 적혀있고, 그에 대한 내부적인 원리는 설명하고 있지 않다.

당시의 참조값이 동일해서일까? 아니면 React가 동일한 state에 대해 setter를 호출할 때 이전 setter들을 무시해서일까?

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다.

문득 이런 문장이 보였다. 보는 것과 같이 state는 객체다. 이것을 토대로 조금 더 조사했다.

functional-setstate-is-the-future-of-react이 문서를 보고 실마리를 잡았다.

Object Composition이라는 개념을 알게 되었다. 기존 객체에 동일한 키 값으로 업데이트 할 때 결과적으로 마지막 업데이트만 적용된다는 개념이다.

Object.Assign({}, {name: 'lee'}, {name: 'joo'});

문장으로 표현하자면 이렇다. 최종적으로 적용되는 것은 마지막으로 씌워지는 녀석이다.

setState(count + 1);
setState(count + 1);
setState(count + 1);

위의 형식으로 state를 변경하면 Object Composition처럼 최종적으로 덮어씌워지는 값은 마지막 setState이다.

해당 시점의 참조 값은 동일했다는 생각도 관대하게 보면 아주 틀린 것은 아니었다.

그렇다면 함수형 업데이트는 어떻게 문제를 해결하는 것일까?

링크로 넣은 문서에 따르면 setState에 함수로 인자가 들어올 시 update 큐에 넣고 순차적으로 업데이트를 실행한다고 한다.

Object Composition과는 다른 방법으로 업데이트를 실행하는 것이다.

리액트의 내부가 어떻게 되어있는지는 모르기 때문에 상세하게는 설명할 수 없다.

요약

1. setState는 비동기적으로 작업한다. 그 이유는 렌더링 비용을 최적화하기 위함.
2. 함수형 업데이트를 통해 비동기적인 작업으로 인한 문제를 해결할 수 있다. 비동기적으로 작업한다는 것을 막는 건 아님.
3. 업데이트에 전달하는 함수를 따로 뺄 수도 있다.

const increaseCount = (prev) => {
  return prev + 1;
};

const decreaseCount = (prev) => {
  return prev - 1;
};

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(increaseCount)}>+</button>
      <button onClick={() => setCount(decreaseCount)}>-</button>
    </>
  );
};

다음과 같이 관심사를 분리해 선언적으로 사용할 수도 있다!