Podem ser escritos como funções normais que recebem `props` como argumento e retornam um elemento JSX.

type AppProps = { message: string }; /* também se pode usar uma interface */

const App = ({ message }: AppProps) => <div>{message}</div>;

<details>

<summary><b>Por que `React.FC` é desencorajado? E sobre `React.FunctionComponent` / `React.VoidFunctionComponent`?</b></summary>

Você pode ver isso em muitas bases de código React + TypeScript:

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (

<div>{message}</div>

);

No entanto, o consenso geral hoje é que o uso de `React.FunctionComponent` (ou a abreviação` React.FC`) é [desencorajado] (https://github.com/facebook/create-react-app/pull/8177). Isto é um ponto de vista, é claro, mas se você concorda e deseja remover `React.FC` da sua base de código, você pode usar [este jscodeshift codemod] (https://github.com/gndelia/codemod-replace-react- fc-typescript).

Algumas diferenças da versão de "função normal":

- `React.FunctionComponent` é explícito sobre o tipo de retorno, enquanto a versão normal da função é implícita (ou então precisa de anotações adicionais).

- Fornece verificação de tipos e preenchimento automático para propriedades estáticas como `displayName`,` propTypes` e `defaultProps`.

- Observe que existem alguns problemas conhecidos usando `defaultProps` com` React.FunctionComponent`. Consulte [este problema para obter detalhes] (https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/87). Nós mantemos uma seção `defaultProps` separada para que você também possa consultar.

const Title: React.FunctionComponent<{ title: string }> = ({

children,

title,

}) => <div title={title}>{children}</div>;

<details>

<summary>

Usando `React.VoidFunctionComponent` ou` React.VFC` como alternativa

</summary>

A partir da versão [@types/react 16.9.48] (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), você também poderá usar o tipo `React.VoidFunctionComponent` ou `React.VFC` se quiser tipar `children` explicitamente. Esta é uma solução provisória até que `FunctionComponent` não aceite nenhum `children` por padrão (planejado para `@types/react@^18.0.0`).

type Props = { foo: string };

const FunctionComponent: React.FunctionComponent<Props> = ({

foo,

children,

}: Props) => {

return (

<div>

{foo} {children}

</div>

); // OK

};

const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({

foo,

children,

}) => {

return (

<div>

{foo}

{children}

</div>

);

};

</details>

- _No futuro_, ele poderá marcar automaticamente os `props` como `readonly` (somente leitura), embora isso seja um ponto discutível se o objeto `props` for desestruturado na lista de parâmetros.

Na maioria dos casos, faz pouca diferença qual sintaxe é usada, mas você pode preferir a natureza mais explícita de `React.FunctionComponent`.

</details>

<details>

<summary><b>Problemas menores</b></summary>

Esses padrões não são suportados:

** Renderização condicional **

const MyConditionalComponent = ({ shouldRender = false }) =>

shouldRender ? <div /> : false; // tampouco faça isso em JS

const el = <MyConditionalComponent />; // gera um erro

Isso ocorre porque, devido às limitações do compilador, os componentes de função não podem retornar nada além de uma expressão JSX ou `null`, caso contrário, ele reclama com uma mensagem de erro enigmática dizendo que outro tipo não pode ser atribuído ao Elemento.

const MyArrayComponent = () => Array(5).fill(<div />);

const el2 = <MyArrayComponent />; // gera um erro

**Array.fill**

Infelizmente, apenas anotar o tipo de função não vai ajudar, então se você realmente precisar retornar outros tipos exóticos que o React suporta, será necessário executar uma declaração de tipo:

const MyArrayComponent = () => (Array(5).fill(<div />) as any) as JSX.Element;

[Veja o comentário de @ferdaber aqui] (https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/57).

</details>