Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Uso do React.FC

Olá.

Neste vídeo, começamos a conhecer o atom e o hook useRecoilValue. Durante a refatoração dos componentes Calendario e ListaDeEventos, notei que eles são tipados utilizando um tal de React.FC. Olhando por cima, parece ser uma tipagem para function components, mas não me lembro de ter visto isso em cursos anteriores (a gente só tipava as props, geralmente utilizando uma interface).

Exemplo:

const ListaDeEventos: React.FC<{ 
  aoAlterarStatus: (id: number) => void, 
  aoDeletarEvento: (id: number) => void, 
  aoFiltroAplicado: (data: Date | null) => void }> = ({ aoDeletarEvento, aoAlterarStatus, aoFiltroAplicado }) => { 
      //... 
  }

Por favor, gostaria de saber quando devo utilizar o React.FC. Existe alguma vantagem de tipar um componente dessa forma?

Obrigado.

2 respostas
solução!

Saaalve, Matheus!

Primeiramente parabéns pela dedicação, à todo vapor na formação React com TS!

Agora, vamos lá: o tipo React.FC é uma forma de tipar componentes que retornam JSX. Ele é uma abreviação para Function Component, ou seja, é uma forma simples e direta de definir um componente funcional.

A vantagem de utilizar o React.FC é que ele já inclui algumas propriedades padrão, como children, que é uma propriedade implícita que representa o conteúdo entre as tags do componente. Além de tipar o retorno da função.

Maaaas é importante lembrar que o uso do React.FC não é obrigatório. Algumas pessoas preferem utilizar interfaces para tipar as props, como você mencionou e como utilizamos nos outros cursos.

Hoje em dia, na prática em projetos em produção, não se usa mais essa abordagem (aqui tem uma discussão no github interessante sobre isso). Ele era o padrão e, no meio do caminho, o time do React acabou por não encorajar mais esse tipo de abordagem.

Valeu, Vini! Você será minha companhia nessas próximas semanas, rumo à finalização da formação React com TS.