{"record":{"id":"4d0fd22540fec068","repo":"oxc-project/oxc","slug":"the-context-value-prop-should-not-be-constructed","errorCode":null,"errorMessage":"The Context `value` prop should not be constructed.","messagePattern":"The Context `value` prop should not be constructed\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/jsx_no_constructed_context_values.rs","lineNumber":19,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{\n        Expression, IdentifierReference, JSXAttributeItem, JSXAttributeName, JSXAttributeValue,\n        JSXOpeningElement,\n    },\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::{GetSpan, Span};\n\nuse crate::{\n    AstNode,\n    context::{ContextHost, LintContext},\n    rule::Rule,\n};\n\nfn jsx_no_constructed_context_values(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"The Context `value` prop should not be constructed.\")\n        .with_help(\"Wrap the `value` prop in useMemo() or useCallback(), or use a constant value to prevent unnecessary re-renders.\\nAlternatively, move the value outside the render function if it doesn't depend on props or state.\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct JsxNoConstructedContextValues;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallows JSX context provider values that cause needless re-renders.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// React Context and all its child nodes and Consumers are re-rendered whenever the value prop\n    /// changes. Because each JavaScript object carries its own identity, things like object\n    /// expressions (`{foo: 'bar'}`) or function expressions get a new identity on every render.\n    /// This makes the context think it has gotten a new object and can cause needless re-renders","sourceCodeStart":1,"sourceCodeEnd":37,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_no_constructed_context_values.rs#L1-L37","documentation":"Diagnostic from react/jsx-no-constructed-context-values. A React context Provider's value prop was assigned a freshly constructed value (object literal, array literal, new expression, inline call result, etc.). Such a value gets a new identity on every render, so every consumer of the context re-renders each time the provider renders, even when nothing changed. The help suggests useMemo()/useCallback(), a constant value, or hoisting the value out of the render function when it does not depend on props or state.","triggerScenarios":"<ThemeContext.Provider value={{ theme, setTheme }}>, value={{ count: 0 }}, value={new Set([a, b])}, value={[state, setState]} or any value={buildValue()} where the expression constructs a new reference inline in the provider element.","commonSituations":"Auth/user contexts built inline in an App component; theme or feature-flag objects assembled per render; performance regressions discovered after profiling where all context consumers re-render on every parent render.","solutions":["Wrap the value in useMemo (and callbacks in useCallback): const value = useMemo(() => ({ theme, setTheme }), [theme]);","If the value is constant, define it outside the component or as a module-level constant","If the value depends only on setState-stable setters, memoize with an empty/stable dependency list","For values that genuinely must change every render, reconsider whether context is the right channel, or split the context so consumers subscribe only to changing slices"],"exampleFix":"// before\n<UserContext.Provider value={{ user, logout }}>\n  <App />\n</UserContext.Provider>\n\n// after\nconst value = useMemo(() => ({ user, logout }), [user, logout]);\n<UserContext.Provider value={value}>\n  <App />\n</UserContext.Provider>","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-no-constructed-context-values src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Default to useMemo for context provider values and useCallback for functions inside them","Hoist constant context values outside the component","Split large contexts so only consumers of genuinely changing values re-render"],"tags":["react","context","performance","rerender","usememo","oxlint","lint"],"backgroundTag":"react-context-value-rerender","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}