← Back to rules

react/no-will-update-set-state 정확성

작동 방식

componentWillUpdate 라이프사이클 메서드 내에서 setState 사용을 금지합니다.

왜 문제가 되는가?

컴포넌트 업데이트 단계 중 상태를 업데이트하면 예측 불가능한 컴포넌트 상태가 발생하며, 허용되지 않습니다.
이는 리액트 애플리케이션에서 예기치 않은 동작과 버그를 유발할 수 있습니다.

예시

이 규칙에 위배되는 잘못된 코드 예시:

var Hello = createReactClass({
  componentWillUpdate: function () {
    this.setState({
      name: this.props.name.toUpperCase(),
    });
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

이 규칙을 올바르게 준수하는 올바른 코드 예시:

var Hello = createReactClass({
  componentWillUpdate: function () {
    this.props.prepareHandler();
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

사용 방법

설정 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용하세요:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-will-update-set-state": "error"
  }
}

CLI

oxlint --deny react/no-will-update-set-state --react-plugin

참고 자료

• 규칙 소스