[Fix] display-name: avoid false positive when React is shadowed

lib/rules/display-name.js

@@ -161,6 +161,89 @@ module.exports = {
       return false;
     }
 
+    function hasVariableDeclaration(node, name) {
+      if (!node) return false;
+
+      if (node.type === 'VariableDeclaration') {
+        return node.declarations.some((decl) => {
+          if (!decl.id) return false;
+
+          // const name = ...
+          if (decl.id.type === 'Identifier' && decl.id.name === name) {
+            return true;
+          }
+
+          // const [name] = ...
+          if (decl.id.type === 'ArrayPattern') {
+            return decl.id.elements.some(
+              (el) => el && el.type === 'Identifier' && el.name === name
+            );
+          }
+
+          // const { name } = ...
+          if (decl.id.type === 'ObjectPattern') {
+            return decl.id.properties.some(
+              (prop) => prop.type === 'Property' && prop.key && prop.key.name === name
+            );
+          }
+
+          return false;
+        });
+      }
+
+      if (node.type === 'BlockStatement' && node.body) {
+        return node.body.some((stmt) => hasVariableDeclaration(stmt, name));
+      }
+
+      return false;
+    }
+
+    function isIdentifierShadowed(node, identifierName) {
+      let currentNode = node;
+      while (currentNode && currentNode.parent) {
+        currentNode = currentNode.parent;
+        if (
+          currentNode.type === 'FunctionDeclaration'
+          || currentNode.type === 'FunctionExpression'
+          || currentNode.type === 'ArrowFunctionExpression'
+        ) {
+          break;
+        }
+      }
+
+      if (!currentNode || !currentNode.body) {
+        return false;
+      }
+
+      return hasVariableDeclaration(currentNode.body, identifierName);
+    }
+    /**
+     * Checks whether the component wrapper (e.g. React.memo or forwardRef) is shadowed in the current scope.
+     * @param {ASTNode} node - The CallExpression AST node representing a potential component wrapper.
+     * @returns {boolean} True if the wrapper identifier (e.g. 'React', 'memo', 'forwardRef') is shadowed, false otherwise.
+     */
+    function isShadowedComponent(node) {
+      if (!node || node.type !== 'CallExpression') {
+        return false;
+      }
+
+      if (
+        node.callee.type === 'MemberExpression'
+        && node.callee.object.name === 'React'
+      ) {
+        return isIdentifierShadowed(node, 'React');
+      }
+
+      if (node.callee.type === 'Identifier') {
+        const name = node.callee.name;
+        if (name === 'memo' || name === 'forwardRef') {
+          return isIdentifierShadowed(node, name);
+        }
+      }
+
+      return false;
+    }
+
     // --------------------------------------------------------------------------
     // Public
     // --------------------------------------------------------------------------
@@ -269,9 +352,16 @@ module.exports = {
       'Program:exit'() {
         const list = components.list();
         // Report missing display name for all components
-        values(list).filter((component) => !component.hasDisplayName).forEach((component) => {
-          reportMissingDisplayName(component);
-        });
+        values(list)
+          .filter((component) => {
+            if (isShadowedComponent(component.node)) {
+              return false;
+            }
+            return !component.hasDisplayName;
+          })
+          .forEach((component) => {
+            reportMissingDisplayName(component);
+          });
         if (checkContextObjects) {
           // Report missing display name for all context objects
           forEach(

tests/lib/rules/display-name.js

@@ -29,6 +29,56 @@ const parserOptions = {
 const ruleTester = new RuleTester({ parserOptions });
 ruleTester.run('display-name', rule, {
   valid: parsers.all([
+    {
+      code: `
+        import React, { forwardRef } from 'react'
+
+        const TestComponent = function () {
+          const { forwardRef } = { forwardRef: () => null }
+
+          const OtherComp = forwardRef((props, ref) => \`\${props} \${ref}\`)
+
+          return OtherComp
+        }
+      `,
+    },
+    {
+      code: `
+        import React, { memo } from 'react'
+
+        const TestComponent = function () {
+          const memo = (cb) => cb()
+
+          const Comp = memo(() => {
+            return <div>shadowed</div>
+          })
+
+          return Comp
+        }
+      `,
+    },
+    {
+      code: `
+        import React, { memo, forwardRef } from 'react'
+
+        const MixedShadowed = function () {
+          const memo = (cb) => cb()
+          const { forwardRef } = { forwardRef: () => null }
+          const [React] = [{ memo, forwardRef }]
+
+          const Comp = memo(() => {
+            return <div>shadowed</div>
+          })
+          const ReactMemo = React.memo(() => null)
+          const ReactForward = React.forwardRef((props, ref) => {
+            return \`\${props} \${ref}\`
+          })
+          const OtherComp = forwardRef((props, ref) => \`\${props} \${ref}\`)
+
+          return [Comp, ReactMemo, ReactForward, OtherComp]
+        }
+      `,
+    },
     {
       code: `
         var Hello = createReactClass({
@@ -848,6 +898,66 @@ ruleTester.run('display-name', rule, {
   ]),
 
   invalid: parsers.all([
+    {
+      code: `
+        import React from 'react'
+
+        const Comp = React.forwardRef((props, ref) => {
+        return <div>test</div>
+        })
+      `,
+      errors: [
+        {
+          messageId: 'noDisplayName',
+          line: 4,
+        },
+      ],
+    },
+    {
+      code: `
+        import {forwardRef} from 'react'
+
+        const Comp = forwardRef((props, ref) => {
+        return <div>test</div>
+        })
+      `,
+      errors: [
+        {
+          messageId: 'noDisplayName',
+          line: 4,
+        },
+      ],
+    },
+    {
+      code: `
+        import React from 'react'
+
+        const Comp = React.memo(() => {
+          return <div>test</div>
+        })
+      `,
+      errors: [
+        {
+          messageId: 'noDisplayName',
+          line: 4,
+        },
+      ],
+    },
+    {
+      code: `
+        import { memo } from 'react'
+
+        const Comp = memo(() => {
+          return <div>test</div>
+        })
+      `,
+      errors: [
+        {
+          messageId: 'noDisplayName',
+          line: 4,
+        },
+      ],
+    },
     {
       code: `
         var Hello = createReactClass({