1
resposta

Qual a diferença entre criar um componente usando function e const ?

import React from 'react';

function Store({ produto, descrição }: { produto: string, descrição: string }) {
    return (
        <>
            <h1>{produto}</h1>
            <p>{descrição}</p>
        </>
    )
}

export default Store;

O componente acima está correto teoricamente, com base na aula. No entanto, atualmente, observo que em vários lugares as pessoas estão utilizando um estilo de componente diferente, como exemplificado a seguir

import React from 'react';

const Store:  React.FC<{ produto: string, descrição: string }> = ({ produto, descrição }) => {
  return (
    <div>
      <h1>{produto}</h1>
      <p>{descrição}</p>
    </div>
  );
};

export default Store;
1 resposta

Oi, João, tudo bem?

A principal diferença entre os dois estilos de componente que você mencionou está na sintaxe e na maneira como as funções são declaradas. No primeiro exemplo, você está usando a declaração de função tradicional para criar o componente. Já no segundo exemplo, você está usando uma constante para armazenar uma função de seta (arrow function).

O uso de const com uma função de seta é uma prática comum em JavaScript moderno e TypeScript devido à previsibilidade e compreensão, são mais conciso e legíveis e podem ser úteis quando queremos criar uma função que pode ser passada como um callback sem se preocupar com a mudança do contexto this.

No entanto, em termos de funcionalidade do React, não há diferença entre usar function ou const. Ambos os métodos resultarão em um componente funcional que pode receber props e renderizar JSX.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software