← Back to rules

react/no-redundant-should-component-update 스타일

작동 방식

React.PureComponent를 확장할 때 shouldComponentUpdate 사용을 금지합니다.

참고로, PureComponent 사용은 현대적인 리액트에서는 권장되지 않습니다.

왜 나쁜가요?

React.PureComponent는 얕은 프로퍼티 및 상태 비교로 shouldComponentUpdate를 자동으로 구현합니다. React.PureComponent를 상속하는 클래스에서 shouldComponentUpdate를 정의하는 것은 중복이며, React.PureComponent를 사용하는 목적을 무시하게 됩니다. 맞춤형 비교 로직이 필요한 경우, 대신 React.Component를 확장하세요.

예시

이 규칙에 잘못된 코드 예시:

class Foo extends React.PureComponent {
  shouldComponentUpdate() {
    // 검사 수행
  }

  render() {
    return <div>재미있어요!</div>;
  }
}

function Bar() {
  return class Baz extends React.PureComponent {
    shouldComponentUpdate() {
      // 검사 수행
    }

    render() {
      return <div>좋아요!</div>;
    }
  };
}

이 규칙에 올바른 코드 예시:

class Foo extends React.Component {
  shouldComponentUpdate() {
    // 검사 수행
  }

  render() {
    return <div>재미있어요!</div>;
  }
}

function Bar() {
  return class Baz extends React.Component {
    shouldComponentUpdate() {
      // 검사 수행
    }

    render() {
      return <div>좋아요!</div>;
    }
  };
}

class Qux extends React.PureComponent {
  render() {
    return <div>훌륭해요!</div>;
  }
}

사용 방법

이 규칙을 구성 파일 또는 명령줄 인터페이스에서 활성화하려면 다음을 사용하세요:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-redundant-should-component-update": "error"
  }
}

CLI

oxlint --deny react/no-redundant-should-component-update --react-plugin

참고 자료

• 규칙 소스