setState의 비동기성

setState의 비동기성

리액트는 setState를 만나면 모든 객체를 추출하여 merge하여 단일 객체를 형성한 후

setState를 실행하는데 동일한 키를 갖고 있다면 마지막으로 전달된 키가 우선된다.

increaseScoreBy3 () {
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
}

예제의 3번째 setState만 실행된다.

this.setState({
  counter: this.state.counter + this.props.increment,
});

이러한 코드도 비동기성때문에 위험하다

하지만 함수형 setState의 경우 큐(queue)에 업데이트가 쌓이고

호출된 순서대로 실행된다.

bad case

incrementCount(){
    this.setState({count : this.state.count + 1}) 
    this.setState({count : this.state.count + 1})
  }

+1만 업데이트된다

good case

incrementCount(){
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
  }

+2업데이트가 된다

setState callback

this.setState({
key:value,callback
})

setState가 실행된 후 callback이 실행됨

  state={
   count:0,
   count2:0
 }
addOne=() => {
  let {count,count2}=this.state
  this.setState({count:count+1},
    this.setState((prevState)=>({
      count:prevState.count+2,
      count2:prevState.count2+2
    }))
  )
}
 render(){
  return(
    <div>
      <button
        onClick={this.addOne}>
        +1
      </button>
      <hr/>
      {this.state.count},{this.state.count2}
    </div>
  )
      }

콜백에 setState를 넣어주면 마찬가지로 setState실행시 setState를 묶어 실행되며

콜백에서 동일 키값의 setState를 실헹시키면 이전 SetState만 실행된다.

콜백에 함수형 setState로 실행시켰지만 콜백은 실행되지 않았다.

버튼을 3번클릭시 count는 1씩증가하여3,count2는 2씩증가하여 6이 되었다.

this.setState((prevState, props) => ({
    count: prevState.count + 1
  }));
  this.setState((prevState, props) => ({
    count: prevState.count + 1
  }));

동일한 키값을 두번에 걸쳐 실행하고자 하면 함수형 setState를 두번 실행시켜줘야 할것이다.