← Back to rules

react/jsx-no-constructed-context-values Perf

What it does

Disallows JSX context provider values that cause needless re-renders.

Why is this bad?

React Context and all its child nodes and Consumers are re-rendered whenever the value prop changes. Because each JavaScript object carries its own identity, things like object expressions ({foo: 'bar'}) or function expressions get a new identity on every render. This makes the context think it has gotten a new object and can cause needless re-renders and unintended consequences.

This can be a large performance hit because not only will it cause the context providers and consumers to re-render with all the elements in its subtree, the processing for the tree scan React does to render the provider and find consumers is also wasted.

Examples

Examples of incorrect code for this rule:

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

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

Examples of correct code for this rule:

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

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

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

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

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-no-constructed-context-values": "error",
  },
});

CLI

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

Version

This rule was added in v1.48.0.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground