무심코 지나칠수있는 성능을 저해하는 사소한 실수

오늘 내가 무심코 지나쳐버린 성능을 저해하는 실수...ㅠㅠ

class Game extends PureComponent {
  state = {
    step: 0,
    bgStep: 0,
    fps: 0,
  };

  num = 0;
  elapse_time = Date.now();
  updateHandler = ({ touches, screen, time }) => {
    const FPS = Math.floor((1 / (Date.now() - this.elapse_time)) * 1000);

    this.elapse_time = Date.now(); // 현재 시간으로 초기화
    this.num += 1;

    this.setState({ fps: FPS });
    if (this.state.step > 7) this.setState({ step: 0 });
    if (this.state.bgStep > 1) this.setState({ bgStep: 0 });
    if (this.num % 10 === 0) this.setState({ step: this.state.step + 1 });
    this.setState({ step: this.state.bgStep + 0.001 });
  };
}

updateHandler() 함수는 16ms 마다 실행이 된다.
그런데 setState 마저 여러번 발생한다.
성능적으로 최악이다...

  updateHandler = ({touches, screen, time}: GameLoopUpdateEventOptionType) => {
    const result = {...this.state};
    const FPS = Math.floor((1 / (Date.now() - this.elapse_time)) * 1000);

    this.elapse_time = Date.now(); // 현재 시간으로 초기화
    this.num += 1;
    result.fps = FPS;

    if (this.state.step > 7) result.step = 0;
    if (this.state.bgStep > 1) result.bgStep = 0;
    if (this.num % 10 === 0) result.step += 1;
    result.bgStep += 0.001;

    this.setState(result);
  };

이런 부분은 잊지 말자.