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

lib/rules/display-name.js

@@ -161,6 +161,123 @@
  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'
+ ) {
+ if (currentNode.body && hasVariableDeclaration(currentNode.body, identifierName)) {
+ return true;
+ }
+ }
+
+ if (currentNode.type === 'BlockStatement') {
+ if (hasVariableDeclaration(currentNode, identifierName)) {
+ return true;
+ }
+ }
+
+ if (
+ (currentNode.type === 'FunctionDeclaration'
+ || currentNode.type === 'FunctionExpression'
+ || currentNode.type === 'ArrowFunctionExpression')
+ && currentNode.params
+ ) {
+ const isParamShadowed = currentNode.params.some((param) => {
+ if (param.type === 'Identifier' && param.name === identifierName) {
+ return true;
+ }
+ if (param.type === 'ObjectPattern') {
+ return param.properties.some(
+ (prop) => prop.type === 'Property' && prop.key && prop.key.name === identifierName
+ );
+ }
+ if (param.type === 'ArrayPattern') {
+ return param.elements.some(
+ (el) => el && el.type === 'Identifier' && el.name === identifierName
+ );
+ }
+ return false;
+ });
+
+ if (isParamShadowed) {
+ return true;
+ }
+ }
+ }
+
+ return false;
+ }
+ /**
+ * 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 +386,9 @@
  '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) => !isShadowedComponent(component.node) && !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,72 @@ const parserOptions = {
 const ruleTester = new RuleTester({ parserOptions });
 ruleTester.run('display-name', rule, {
  valid: parsers.all([
+ {
+ code: `
+ import React, { memo, forwardRef } from 'react'
+
+ const TestComponent = function () {
+ {
+ const memo = (cb) => cb()
+ const forwardRef = (cb) => cb()
+ const React = { memo, forwardRef }
+
+ const BlockMemo = memo(() => <div>shadowed</div>)
+ const BlockForwardRef = forwardRef(() => <div>shadowed</div>)
+ const BlockReactMemo = React.memo(() => <div>shadowed</div>)
+ }
+ return null
+ }
+ `,
+ },
+ {
+ code: `
+ import React, { memo, forwardRef } from 'react'
+
+ const Test1 = function (memo) {
+ return memo(() => <div>param shadowed</div>)
+ }
+
+ const Test2 = function ({ forwardRef }) {
+ return forwardRef(() => <div>destructured param</div>)
+ }
+ `,
+ },
+ {
+ code: `
+ import React, { memo, forwardRef } from 'react'
+
+ const TestComponent = function () {
+ function innerFunction() {
+ const memo = (cb) => cb()
+ const React = { forwardRef }
+
+ const Comp = memo(() => <div>nested</div>)
+ const ForwardComp = React.forwardRef(() => <div>nested</div>)
+ return [Comp, ForwardComp]
+ }
+ return innerFunction()
+ }
+ `,
+ },
+ {
+ 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(() => <div>shadowed</div>)
+ const ReactMemo = React.memo(() => null)
+ const ReactForward = React.forwardRef((props, ref) => \`\${props} \${ref}\`)
+ const OtherComp = forwardRef((props, ref) => \`\${props} \${ref}\`)
+
+ return [Comp, ReactMemo, ReactForward, OtherComp]
+ }
+ `,
+ },
  {
  code: `
  var Hello = createReactClass({
@@ -848,6 +914,82 @@ ruleTester.run('display-name', rule, {
  ]),
 
  invalid: parsers.all([
+ {
+ code: `
+ import React, { memo, forwardRef } from 'react'
+
+ const TestComponent = function () {
+ {
+ const BlockReactMemo = React.memo(() => {
+ return <div>not shadowed</div>
+ })
+
+ const BlockMemo = memo(() => {
+ return <div>not shadowed</div>
+ })
+
+ const BlockForwardRef = forwardRef((props, ref) => {
+ return \`\${props} \${ref}\`
+ })
+ }
+
+ return null
+ }
+ `,
+ errors: [
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' }
+ ],
+ },
+ {
+ code: `
+ import React, { memo, forwardRef } from 'react'
+
+ const Test1 = function () {
+ const Comp = memo(() => <div>not param shadowed</div>)
+ return Comp
+ }
+
+ const Test2 = function () {
+ function innerFunction() {
+ const Comp = memo(() => <div>nested not shadowed</div>)
+ const ForwardComp = React.forwardRef(() => <div>nested</div>)
+ return [Comp, ForwardComp]
+ }
+ return innerFunction()
+ }
+ `,
+ errors: [
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' }
+ ],
+ },
+ {
+ code: `
+ import React, { memo, forwardRef } from 'react'
+
+ const MixedNotShadowed = function () {
+ const Comp = memo(() => {
+ return <div>not 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]
+ }
+ `,
+ errors: [
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' },
+ { messageId: 'noDisplayName' }
+ ],
+ },
  {
  code: `
  var Hello = createReactClass({