setState 호출 직후 상태가 바로 업데이트 되지 않는 이슈

[ setState() 호출 후 상태가 바로 업데이트 되지 않는 이슈 ]

1. setState() 후 값을 바로 API body 에 넣어서 보낼 때

2. 연속적으로 setState를 호출할 때

react로 개발하면서 이와 같은 이슈를 경험한 적이 있다.

setState()는 비동기

setState() 호출은 비동기적으로 이뤄지기 때문에 setState호출 직후 새로운 값이 반영되지 않는다.

리액트 엘리먼트 트리와 전달받은 state가 적용된 엘리먼트 트리를 비교하는 작업을 거치고 최종적으로 변경된 부분만 DOM에 적용된다.
React는 컴포넌트가 리렌더링될 때까지 값을 갱신하지 않기 때문이다.

setState는 이벤트 핸들러 내에서 비동기적이기 때문에 react는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다. 불필요한 렌더링을 방지하며 성능을 향상시킨다.

incrementCount() {
  // 주의: 이 코드는 예상대로 동작하지 *않을 것*입니다.
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
}
// 3을 예상하고 코드를 짰지만 결과 값 1

마지막 값만 set됨

이런 패턴을 오브젝트 컴포지션(object composition)이라고한다.

자바스크립트에서 만약 3개의 객체가 동일한 키를 갖고 있다면, Object.assign()에 마지막으로 전달 된 객체의 키 값이 우선된다.

setState는 이벤트 핸들러 내에서 비동기적으로 동작한다. 즉, 하나의 이벤트 핸들러 내에서 setState가 여러번 호출된다면, 이벤트가 끝날 시점에 state를 일괄적으로 업데이트하고 렌더링한다. ( 성능 향상을 위해 )

해결방법 1

setState에 객체를 전달하지 않고 함수를 전달

setState가 비동기적으로 동작한다는 것은 변함 없지만 인자로 넘겨 받는 함수들은 queue에 저장되어 순서대로 실행된다.

첫번째 함수가 실행된 후 리턴하는 업데이트된 state가 두번째 함수의 인자로 들어가는 방식

incrementCount() {
  this.setState((state) => {
    // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
    return {count: state.count + 1}
  });
}

handleSomething() {
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
}

https://ko.reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value

컴포넌트 State – React

submit(){ 
   this.setState(function(prevState, props){ 
      return {showForm: !prevState.showForm} 
   });}

add() {
  this.setState({count: this.state.count+1}, () => {
    console.log(this.state.count);
  });
}

handleClick() {
  this.add();
}

해결방법 2

새로운 state 객체를 받기

setState() 후 값을 바로 API body 에 넣어서 보낼 때 

새로운 객체를 만들어 보내기

 

상세한 예시로 설명한 아래 글을 참고하세요.

https://yjae-sw.tistory.com/224

[React] setState() 후 state값을 바로 API 파라미터로 호출할 때 주의점, setState후 console.log()에 새로운