← Back to rules

react/jsx-no-constructed-context-values パフォーマンス

何をするか

コンテキストプロバイダの値が不要な再レンダリングを引き起こすような値を受け取ることを禁止します。

なぜ悪いのか

React Context およびそのすべての子ノードとコンシューマーは、value プロップが変更されたときに再レンダリングされます。
各 JavaScript オブジェクトには独自の識別子があるため、オブジェクト式（{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" />;

使い方

設定ファイルまたは CLI でこのルールを有効化するには、以下のように使用できます：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース