fix(rule): detect constructed context values in React 19 <Context> usage

Author: TildaDares

docs/rules/jsx-no-constructed-context-values.md

@@ -22,6 +22,16 @@ return (
 )
 ```
 
+```jsx
+import React from 'react';
+
+const MyContext = React.createContext();
+function Component() { 
+    function foo() {}; 
+    return (<MyContext value={foo}></MyContext>)
+}
+```
+
 Examples of **correct** code for this rule:
 
 ```jsx
@@ -33,6 +43,11 @@ return (
 )
 ```
 
+```jsx
+const SomeContext = createContext();
+const Component = () => <SomeContext value="Some string"><SomeContext>;
+```
+
 ## Legitimate Uses
 
 React Context, and all its child nodes and Consumers are rerendered 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 run through the component. This makes the context think it has gotten a new object and can cause needless rerenders and unintended consequences.

lib/rules/jsx-no-constructed-context-values.js

@@ -119,6 +119,38 @@ function isConstruction(node, callScope) {
   }
 }
 
+function isReactContext(context, node) {
+  let scope = getScope(context, node);
+  let variableScoping = null;
+  const contextName = node.name;
+
+  while (scope && !variableScoping) { // Walk up the scope chain to find the variable
+    variableScoping = scope.set.get(contextName);
+    scope = scope.upper;
+  }
+
+  if (!variableScoping) { // Context was not found in scope
+    return false;
+  }
+
+  // Get the variable's definition
+  const def = variableScoping.defs[0];
+
+  if (!def || def.node.type !== 'VariableDeclarator') return false;
+
+  const init = def.node.init; // Variable initializer
+
+  const isCreateContext = init
+    && init.type === 'CallExpression'
+    && ((init.callee.type === 'Identifier'
+      && init.callee.name === 'createContext')
+      || (init.callee.type === 'MemberExpression'
+        && init.callee.object.name === 'React'
+        && init.callee.property.name === 'createContext'));
+
+  return isCreateContext;
+}
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -148,14 +180,20 @@ module.exports = {
     return {
       JSXOpeningElement(node) {
         const openingElementName = node.name;
-        if (openingElementName.type !== 'JSXMemberExpression') {
-          // Has no member
-          return;
-        }
 
-        const isJsxContext = openingElementName.property.name === 'Provider';
-        if (!isJsxContext) {
-          // Member is not Provider
+        if (openingElementName.type === 'JSXMemberExpression') {
+          const isJsxContext = openingElementName.property.name === 'Provider';
+          if (!isJsxContext) {
+            // Member is not Provider
+            return;
+          }
+        } else if (openingElementName.type === 'JSXIdentifier') {
+          const isJsxContext = isReactContext(context, openingElementName);
+          if (!isJsxContext) {
+            // Member is not context
+            return;
+          }
+        } else {
           return;
         }
 

tests/lib/rules/jsx-no-constructed-context-values.js

@@ -147,6 +147,28 @@ ruleTester.run('react-no-constructed-context-values', rule, {
         );
       `,
     },
+    {
+      code: `
+        import React from 'react';
+
+        const MyContext = React.createContext();
+        const Component = () => <MyContext value={props}></MyContext>;
+      `,
+    },
+    {
+      code: `
+        import React from 'react';
+
+        const MyContext = React.createContext();
+        const Component = () => <MyContext value={100}></MyContext>;
+      `,
+    },
+    {
+      code: `
+        const SomeContext = createContext();
+        const Component = () => <SomeContext value="Some string"></SomeContext>;
+      `,
+    },
   ]),
   invalid: parsers.all([
     {
@@ -468,5 +490,63 @@ ruleTester.run('react-no-constructed-context-values', rule, {
         },
       ],
     },
+    {
+      // Invalid because function declaration creates a new identity
+      code: `
+        import React from 'react';
+
+        const Context = React.createContext();
+        function Component() { 
+          function foo() {}; 
+          return (<Context value={foo}></Context>)
+        }
+      `,
+      errors: [
+        {
+          messageId: 'withIdentifierMsgFunc',
+          data: {
+            variableName: 'foo',
+            type: 'function declaration',
+            nodeLine: '6',
+            usageLine: '7',
+          },
+        },
+      ],
+    },
+    {
+      // Invalid because the object value will create a new identity
+      code: `
+        const MyContext = createContext();
+        function Component() { const foo = {}; return (<MyContext value={foo}></MyContext>) }
+      `,
+      errors: [
+        {
+          messageId: 'withIdentifierMsg',
+          data: {
+            variableName: 'foo',
+            type: 'object',
+            nodeLine: '3',
+            usageLine: '3',
+          },
+        },
+      ],
+    },
+    {
+      // Invalid because inline object construction will create a new identity
+      code: `
+        const MyContext = createContext();
+        function Component() { return (<MyContext value={{foo: "bar"}}></MyContext>); }
+      `,
+      errors: [
+        {
+          messageId: 'defaultMsg',
+          data: {
+            type: 'object',
+            nodeLine: '3',
+            usageLine: '3',
+          },
+        },
+      ],
+    },
   ]),
 });