From d9531c3bc539e292eb297a04c7b9312e8b63a223 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Tue, 1 Mar 2022 09:47:53 -0800
Subject: [PATCH] `propTypes`: add `VFC` to react generic list

Fixes #3230
---
 CHANGELOG.md                  |  2 ++
 lib/util/propTypes.js         |  2 +-
 tests/lib/rules/prop-types.js | 61 +++++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c50ccc0dba..39a6166a80 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Fixed
 * [`no-unused-state`]: avoid a crash on type-only gDSFP declarations ([#3225][] @ljharb)
 * [`jsx-curly-brace-presence`]: the string "never" defaults to `propElementValues` as `ignore` ([#3228][] @ljharb)
+* [`propTypes`]: add `VFC` to react generic list ([#3230][] @ljharb)
 
+[#3230]: https://github.com/yannickcr/eslint-plugin-react/issues/3230
 [#3228]: https://github.com/yannickcr/eslint-plugin-react/issues/3228
 [#3225]: https://github.com/yannickcr/eslint-plugin-react/issues/3225
 
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
index 8da9fb9f15..a61a57d67b 100644
--- a/lib/util/propTypes.js
+++ b/lib/util/propTypes.js
@@ -100,7 +100,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
   const defaults = { customValidators: [] };
   const configuration = Object.assign({}, defaults, context.options[0] || {});
   const customValidators = configuration.customValidators;
-  const allowedGenericTypes = new Set(['forwardRef', 'ForwardRefRenderFunction', 'VoidFunctionComponent', 'PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
+  const allowedGenericTypes = new Set(['forwardRef', 'ForwardRefRenderFunction', 'VFC', 'VoidFunctionComponent', 'PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
   const genericTypeParamIndexWherePropsArePresent = {
     ForwardRefRenderFunction: 1,
     forwardRef: 1,
diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
index b6f1e80a9a..d44285ab0f 100644
--- a/tests/lib/rules/prop-types.js
+++ b/tests/lib/rules/prop-types.js
@@ -7746,6 +7746,27 @@ ruleTester.run('prop-types', rule, {
       ],
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import React, { VFC } from 'react'
+
+        interface Props {
+        age: number
+        }
+        const Hello: VFC<Props> = function Hello(props) {
+        const { test } = props;
+
+        return <div>Hello {name}</div>;
+        }
+      `,
+      errors: [
+        {
+          messageId: 'missingPropType',
+          data: { name: 'test' },
+        },
+      ],
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React from 'react'
@@ -7771,6 +7792,27 @@ ruleTester.run('prop-types', rule, {
       code: `
         import React from 'react'
 
+        interface Props {
+        age: number
+        }
+        const Hello: React.VFC<Props> = function Hello(props) {
+        const { test } = props;
+
+        return <div>Hello {name}</div>;
+        }
+      `,
+      errors: [
+        {
+          messageId: 'missingPropType',
+          data: { name: 'test' },
+        },
+      ],
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+        import React from 'react'
+
         type IfooProps = { e: string };
           const Foo: React.ForwardRefRenderFunction<HTMLDivElement, IfooProps> = function Foo (props, ref) {
           const { name } = props;
@@ -7971,6 +8013,25 @@ ruleTester.run('prop-types', rule, {
       ],
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+        import React from 'react';
+
+        export interface PersonProps {
+            username: string;
+        }
+        const Person: React.VFC<PersonProps> = (props): React.ReactElement => (
+            <div>{props.nonExistent}</div>
+        );
+      `,
+      errors: [
+        {
+          messageId: 'missingPropType',
+          data: { name: 'nonExistent' },
+        },
+      ],
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         const Foo = ({ foo }) => {