Qual a melhor maneira de usar componentes no React?

[wilsongomes-swe]

Galera, usar componentes em react com function ou com class? Qual a maneira correta? Ou ambas são corretas?

Fazendo a semana omnistack esta semana percebi a preferencia deles por usar componentes funcionais, todos declarados em forma de função.

Como eu venho do C#, lido bem com classes e acho até mais organizados e mais fácil de ler.

Há uma maneira considerada a correta?

Obrigado!

[bizarro]

A resposta rápida é que ambas são corretas. 😄 Mas eu, particularmente, adoro usar eles como classes pois me lembram as ES6 classes, e em projetos sem React eu costumo usar bastante.

Mas a tendência que ando observando é o replacement de componentes que usam classes pelos funcionais em projetos React mesmo. Na maioria dos casos fica bem menos verbosos e você escreve bem menos.

Então minha sugestão é estudar para saber fazer das duas maneiras. E prestar bastante atenção na API de useState, useEffect, useCallback, etc. Pois ficam bem diferentes na implementação do que um componente que utiliza extend de PureComponent ou Component.

[tcelestino]

@wilsonneto-dev, se preferir, pode ler esse artigo do Dan Abramov sobre o desenvolvimento de componentes em classes e função. É bem completo e vai conseguir os beneficios de cada uma das implementações.

[davipm]

Ambas arbodagens são corretas, mas os Hooks facilitam demais a vida, e são menos verbosos e bem fácil a reutilização da lógica com os Hooks custom, eu já não uso mais class nos meu projetos novos.

[wilsongomes-swe]

Opa, @davi-94, @tcelestino, @lhbzr , muito obrigado pelas respostas!

[victorferreira]

Um ponto que eu considero importante a ser considerado sobre classes é que no JS o modelo de objetos é baseado em proptotype, o que é diferente de várias outras linguagens orientadas a objetos. O uso de class no javascript é apenas syntax sugar para o prototype, então vale a pena levar isso em consideração.

Sobre os componentes do react, eu prefiro usar functional components já que casa bem da ideia do React de ter componentes que reagem em função da mudança do estado. Nesse sentido não existe certo ou errado, mas o que faz sentido pra você e para o seu cenário. Como diria o filósofo, cada escolha uma renúncia, isso é a vida.

[ninetails]

Também sou fã de componentes funcionais, porém concordo que ambas as formas são corretas.

Adicionando, diria para levar em conta o perfil do time/seu perfil. Como nada impede de utilizar ambas as formas, tente utilizar a que vc se sinta mais habituado. Use classes se achar que fica mais à vontade com orientação a objeto ou componentes funcionais se caso quiser se desafiar e tentar algo mais "simplificado" (menos verboso) ou curta programação funcional.

Num lugar que trabalhei anteriormente tinha um time que utilizava classes e TypeScript pois tinha muito Javeiro lá.

[felipefialho]

Alterei o titulo e a dúvida original para dar mais margem de discussão na issue (que curti bastante) 😄