Notei durante o curso até aqui que sempre é utilizado const com arrow function no lugar onde se utilizaria function. Sei que não tem problema e que funciona igualmente, mas qual a real diferença e quando escolher cada uma?
Notei durante o curso até aqui que sempre é utilizado const com arrow function no lugar onde se utilizaria function. Sei que não tem problema e que funciona igualmente, mas qual a real diferença e quando escolher cada uma?
Salve, Felipe!
Vamos começar com uma breve comparação entre as duas.
Funções declaradas têm uma característica bem interessante chamada elevação, ou "hoisting" em inglês. Isso quer dizer que você pode usar a função antes mesmo de declará-la no código, uma característica que não encontramos nas arrow functions. Mas relaxa, isso raramente é importante no React, pois costumamos declarar nossos componentes antes de usá-los.
Agora, as Arrow functions têm uma sintaxe mais curta e direta, o que acaba tornando o código um pouco mais limpo, principalmente se a função tiver um corpo pequeno. Veja aí o exemplo de dois componentes que fazem a mesma coisa, um usando função declarada e outro arrow function:
function FalaMundo() {
return <h1>Fala, Mundo!</h1>;
}
const MundoFala = () => {
return <h1>Mundo, Fala!</h1>;
};
Reparou que o this
ficou de fora dessa conversa, né? Isso porque, nos componentes funcionais do React, geralmente não precisamos nos preocupar com ele, ao contrário dos componentes de classe.
E por último, se por acaso precisar que um componente se refira a si mesmo, como numa função recursiva, a função declarada pode ser a melhor opção, pois a função já existe a partir do momento em que é declarada.
Agora, na real, escolher entre usar função declarada ou arrow function para componentes funcionais no React vai muito do seu gosto pessoal ou da preferência da equipe. As diferenças entre as duas são sutis e provavelmente não vão impactar na maioria dos componentes que você criar. A galera do React parece curtir mais as arrow functions por ter uma sintaxe mais limpa. E eu também curto :)