221208 항해99 32일차 useState의 비동기적 특성, 함수형 업데이트

setState의 비동기적 특성

export default function App() {
  const [value, setValue] =  useState(0)

  const onClick = () => {
    setValue(value+1)
    setValue(value+1)
    setValue(value+1)
  }
  
  return (
    <div className="App">
      <button onClick={onClick}>+</button>
      <h1>{value}</h1>
    </div>
  );
}

• 위에서 버튼을 클릭하면 1이 나온다.
• 이는 setState의 비동기적 특성때문이다.
• 리액트가 효율적으로 렌더링하기 위해 여러 개의 상태값 변경 요청을 batch(일괄처리) 한다.
• batch의 이유는 성능 이슈이다. 리렌더링을 발생시키는 setState가 매번 리렌더링을 일으킨다면 엄청나게 많은 렌더링이 일어날 것이기 때문이다.

// A : 이번 렌더링의 초기(시작) state 값
// B : 저장하여 다음 렌더링에 사용될 state 값

// A = 0

setValue(value+1)
// ① B = A + 1 => 2

setValue(value+1)
// ② B = A + 1 => 2

setValue(value+1)
// ③ B = A + 1 => 2

• 이렇게 setState는 변경된 사항을 기억하지 않기 때문에 마지막 업데이트만 적용되어 다음 렌더링에 쓰이게 된다.

setState 함수형 업데이트

• 함수형 업데이트를 사용하면 setState를 동기적으로 처리할 수 있다.

export default function App() {
  const [value, setValue] =  useState(0)

  const onClick = () => {
    setValue(prev => prev+1)
    setValue(prev => prev+1)
    setValue(prev => prev+1)
  }
  
  return (
    <div className="App">
      <button onClick={onClick}>+</button>
      <h1>{value}</h1>
    </div>
  );
}

// A : 이번 렌더링 초기(시작) state 값
// B : A 또는 이번 렌더링에서 업데이트된 값 / 다음 렌더링에 사용될 값
// C : 함수형 업데이트를 통해 생겨난 값

// A = 0
// B = A = 0

setValue(prev => prev+1)
// ①-1 : C = B + 1 => 1 
// ①-2 : C 를 B 에 저장

setValue(prev => prev+1)
// ②-1 : C = B + 1 => 2
// ②-2 : C 를 B 에 저장

setValue(prev => prev+1)
// ③-1 : C = B + 1 => 3
// ③-2 : C 를 B 에 저장

• 함수형 업데이트는 이렇게 업데이트된 값을 저장하기 때문에 여러번의 업데이트가 적용되어 다음 렌더링에 사용된다.

참조:
[ React ] useState 의 렌더링과 함수형 업데이트