setState가 비동기인 이유?

setState했는데 값이 안바뀐다?

export default function App() {
  const [count, setCount] = useState(0);
  const onAdd = () => {
    setCount(count + 1);
    console.log(count);
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick={onAdd}>+1</button>
    </div>
  );
}

위 코드를 실행해보면, 화면에 나타나는 count는 정상적으로 1이지만, 콘솔 창에는 0이 출력된다.

단순히 화면을 리렌더링 하는데에는 문제가 없지만 아래와 같이 setState 이후 상태값을 바로 다른 로직에 사용하면 원하지 않는 결과를 맛보게 된다.

export default function App() {
  const [count, setCount] = useState(0);
  const [biggerCount, setBiggerCount] = useState(0);

  const onAdd = () => {
    setCount(count + 1);
    console.log("onAdd count: " + count);

    setBiggerCount(count + 1);  //업데이트된 count값을 사용할 것을 기대한다
    console.log("onAdd biggerCount: " + biggerCount);
  };

  useEffect(() => {
    console.log("useEffect count: " + count);
  }, [count]);

  return (
    <div>
      <div>{count}</div>
      <button onClick={onAdd}>+1</button>
    </div>
  );
}

코드를 실행하면 count가 즉시 변경되지는 않아도, 변경되긴 한다는 것을 알 수 있다. 즉, setState는 비동기 함수이다.

onAdd count: 0 
onAdd biggerCount: 0 
useEffect count: 1

React batch updating: setState는 비동기로 수행된다

State Updates May Be Asynchronous
React may batch multiple setState() calls into a single update for performance.

React 공식 문서에서는 상태 갱신이 비동기로 수행됨을 명시하고 있다. 즉 위 예시에서는 동기함수인 console.log가 먼저 실행되기 때문에 상태값이 갱신되기 이전의 값을 출력한다.

그렇다면 이렇게 동작하는 이유는 뭘까?

React state batch updating

setState로 매번 상태가 업데이트될때마다 리렌더링을 한다면 매번 리액트의 컴포넌트 비교 알고리즘이 실행될 것이고, 렌더링에 소모되는 비용이 많아지게 된다. 단적인 예로, 한 상태값에 대해 연속으로 업데이트를 해준 후 최종 값만 사용자의 화면에 보여주는 경우에는 이러한 방법이 비효율적일 것이다.
따라서 React는 batch updating이라는 특징을 통해 일정 시간마다 상태값이 변경된 컴포넌트들을 모아서 한번에 리렌더링하여 효율성을 높인다.
아래 샘플을 돌려보면 세 개의 상태값을 연속으로 갱신했지만 렌더링 횟수는 1씩 증가한다.

 

상태값을 갱신하자마자 사용하고 싶다면?

1. setState에서 콜백함수 사용하기

export default function App() {
  const [count, setCount] = useState(0);

  const onAdd = () => {
    setCount((prev) => {
      console.log(prev + 1);
      return prev + 1;
    });
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick={onAdd}>+1</button>
    </div>
  );
}

2. useEffect로 해당 상태값 트래킹하기

export default function App() {
  const [count, setCount] = useState(0);
  const onAdd = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    console.log(count);  //count가 갱신된 후에 필요한 연산을 수행
  },[count]);

  return (
    <div>
      <div>{count}</div>
      <button onClick={onAdd}>+1</button>
    </div>
  );
}

참고자료 및 샘플코드

• https://medium.com/swlh/react-state-batch-update-b1b61bd28cd2
• https://stackoverflow.com/questions/54119678/is-usestate-synchronous