Do not use React.FC

[tkrotoff]

Payload source code, examples and documentation use React.FC (and/or friends: React.FunctionComponent, React.FunctionalComponent)

Instead of writing:

const MyComponent: React.FC<Props> = ({ hello }) => {
  // ...
}

just write:

function MyComponent({ hello }: Props) {
  // ...
}

React and TypeScript perfectly type this for years now.

There is a wide consensus that React.FC (and friends) is obsolete and “dangerous”:

• React.FC has been removed from create-react-app in January 2020: Remove React.FC from Typescript template facebook/create-react-app#8177
• Martin Hochel one of the core contributor of react.d.ts don't recommend it (2019): [@types/react] Alternative FunctionComponent without children DefinitelyTyped/DefinitelyTyped#34237 (comment)
• React+TypeScript Cheatsheets also doesn't recommend it: https://github.com/typescript-cheatsheets/react#function-components
• Kent C Doods also in may 2021: https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript
• Backstage (an open source framework) has an ADR with the same conclusions since may 2020: https://backstage.io/docs/architecture-decisions/adrs-adr006/

Here a codemod to remove React.FC: https://github.com/gndelia/codemod-replace-react-fc-typescript

You can also add an ESLint rule to ban React.FC: https://stackoverflow.com/a/76818791

[JarrodMFlesch]

I agree with this change, looks like 600+ files would need to change. 370+ would be in packages/payload.

[jmikrut]

I'm into it too, would be a good PR for someone to make. Gonna convert to discussion and add this to the roadmap

[lahiruramesh]

I have made changes to this only for the tests folder(#7528). This is my first contribution to the codebase.

remaining folders to remove React.RC
docs
examples
packages
templates

I used this command to refactor the code.

npx jscodeshift -- -t https://raw.githubusercontent.com/gndelia/codemod-replace-react-fc-typescript/main/dist/index.js --extensions=tsx --verbose=2 test\fields-relationship

[austingayler]

https://www.totaltypescript.com/you-can-stop-hating-react-fc

As of TypeScript 5.1 and React 18, React.FC is now officially 'fine'.

    It no longer implicitly includes children in the props type.
    It no longer breaks if you return undefined, string, or number.

I still recommend simply annotating props instead of using React.FC. But if you do use React.FC in your codebase, there's no reason to remove it.