[Fix] no-unused-prop-types: detect used props in nested components

Author: avaice

lib/util/usedPropTypes.js

@@ -407,7 +407,20 @@ module.exports = function usedPropTypesInstructions(context, components, utils)
       }
     }
 
-    components.set(component ? component.node : node, {
+    let targetNode = component ? component.node : node;
+
+    if (component && !component.declaredPropTypes) {
+      let parentComponent = components.get(node.parent);
+      while (parentComponent) {
+        if (parentComponent.declaredPropTypes) {
+          targetNode = parentComponent.node;
+          break;
+        }
+        parentComponent = components.get(parentComponent.parent);
+      }
+    }
+
+    components.set(targetNode, {
       usedPropTypes,
       ignoreUnusedPropTypesValidation,
     });

tests/lib/rules/no-unused-prop-types.js

@@ -3948,6 +3948,22 @@ ruleTester.run('no-unused-prop-types', rule, {
       `,
       features: ['types'],
     },
+    {
+      code: `
+        type Props = {
+          used: string;
+        };
+
+        const Demo = React.memo<Props>(
+          React.forwardRef<HTMLDivElement, Props>(
+            ({ used }, ref) => {
+              return <div>{used}</div>
+            }
+          )
+        );
+      `,
+      features: ['types'],
+    },
   ]),
 
   invalid: parsers.all([].concat(
@@ -6709,6 +6725,26 @@ ruleTester.run('no-unused-prop-types', rule, {
       errors: [
         { message: '\'bar\' PropType is defined but prop is never used' },
       ],
+    },
+    {
+      code: `
+        type Props = {
+          used: string;
+          unused: string;
+        };
+
+        const Demo = React.memo<Props>(
+          React.forwardRef<HTMLDivElement, Props>(
+            ({ used }, ref) => {
+              return <div>{used}</div>
+            }
+          )
+        );
+      `,
+      features: ['ts', 'no-babel'],
+      errors: [
+        { message: '\'unused\' PropType is defined but prop is never used' },
+      ],
     }
   )),
 });