← Back to rules

react/jsx-no-constructed-context-values 성능

작동 방식

렌더링 시 불필요한 재렌더링을 유발할 수 있는 값이 포함된 JSX 컨텍스트 제공자 값을 사용하는 것을 금지합니다.

왜 문제일까요?

리액트 컨텍스트와 그 모든 하위 노드 및 소비자는 value 속성이 변경될 때마다 재렌더링됩니다. 각 자바스크립트 객체는 고유한 정체성을 가지므로, 객체 표현식({foo: 'bar'})이나 함수 표현식은 매 렌더링마다 새로운 정체성을 가집니다. 이로 인해 컨텍스트는 새로운 객체가 전달된 것으로 간주하게 되어 불필요한 재렌더링과 예기치 않은 결과를 초래할 수 있습니다.

이것은 성능에 큰 영향을 미칠 수 있습니다. 컨텍스트 제공자와 소비자가 서브트리 내 모든 요소와 함께 재렌더링되는 것뿐 아니라, 리액트가 제공자를 렌더링하고 소비자를 찾기 위해 수행하는 트리 스캔 처리도 낭비되기 때문입니다.

예시

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

return <SomeContext.Provider value={{ foo: "bar" }}>...</SomeContext.Provider>;

function Component() {
  function foo() {}
  return <MyContext.Provider value={foo} />;
}

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

const foo = useMemo(() => ({ foo: "bar" }), []);
return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;

const MyContext = createContext();
const Component = () => <MyContext.Provider value="Some string" />;

사용 방법

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

설정 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-constructed-context-values": "error"
  }
}

CLI

oxlint --deny react/jsx-no-constructed-context-values --react-plugin

참고 항목

• 규칙 소스