← Back to rules

react-perf/jsx-no-new-object-as-prop Perf

작동 방식

현재 메서드 내에서 로컬로 정의된 객체를 JSX 속성 값으로 사용하는 것을 방지합니다.

왜 문제가 되는가?

로컬로 정의된 객체를 속성 값으로 사용하면 예기치 않은 재렌더링과 성능 문제를 초래할 수 있습니다. 부모 컴포넌트가 렌더링될 때마다 새로운 객체 인스턴스가 생성되며, 이로 인해 자식 컴포넌트의 불필요한 재렌더링이 발생합니다. 또한 컴포넌트의 속성이 일관되게 전달되지 않아 유지보수가 어려워지는 결과를 초래합니다.

예시

이 규칙에 부적절한 코드 예시:

<Item config={{}} />
<Item config={new Object()} />
<Item config={Object()} />
<Item config={this.props.config || {}} />
<Item config={this.props.config ? this.props.config : {}} />
<div style={{display: 'none'}} />

이 규칙에 적절한 코드 예시:

<Item config={staticConfig} />

사용 방법

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

Config (.oxlintrc.json)

{
  "plugins": ["react-perf"],
  "rules": {
    "react-perf/jsx-no-new-object-as-prop": "error"
  }
}

CLI

oxlint --deny react-perf/jsx-no-new-object-as-prop --react-perf-plugin

참고자료

• 규칙 소스