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

Author: avaice

CHANGELOG.md

@@ -23,6 +23,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-key`]: detect missing keys in return statement with ternary operator ([#3928][] @hyeonbinHur)
 * [`jsx-key`]: detect missing keys in logical expressions ([#3986][] @yalperg)
 * [`display-name`]: avoid false positive when React is shadowed ([#3926][] @hyeonbinHur)
+* [`no-unused-prop-types`]: detect used props in nested components ([#3955][] @avaice)
 
 ### Changed
 * [Docs] [`no-array-index-key`]: add template literal examples ([#3978][] @akahoshi1421)
@@ -32,6 +33,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3958]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3958
 [#3980]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3980
 [#3965]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3965
+[#3955]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3955
 [#3950]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3950
 [#3943]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3943
 [#3942]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3942

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,34 @@ 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'],
+    },
+    {
+      code: `
+        const Demo = React.memo(
+          React.forwardRef(({ used }, ref) => {
+            return <div ref={ref}>{used}</div>
+          })
+        );
+        Demo.propTypes = {
+          used: PropTypes.string,
+        };
+      `,
+    },
   ]),
 
   invalid: parsers.all([].concat(
@@ -6709,6 +6737,42 @@ 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' },
+      ],
+    },
+    {
+      code: `
+        const Demo = React.memo(
+          React.forwardRef(({ used }, ref) => {
+            return <div ref={ref}>{used}</div>
+          })
+        );
+        Demo.propTypes = {
+          used: PropTypes.string,
+          unused: PropTypes.string,
+        };
+      `,
+      errors: [
+        { message: '\'unused\' PropType is defined but prop is never used' },
+      ],
     }
   )),
 });