[Dúvida] Qual a diferença entre classes e componentes funcionais no react?

Oi, Gabriel! Como vai?

No React, a principal diferença entre componentes de classe e componentes funcionais está na forma como são definidos e no uso do estado e dos efeitos colaterais.

Componentes de classe são definidos utilizando a sintaxe de classe do JavaScript e requerem o uso de métodos como render(), além de serem mais verbosos. Eles também usam o método this para acessar o estado e outros recursos do componente.

Montei dois exemplos, da uma olhada:

class MeuComponente extends React.Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }

  render() {
    return (
      <div>
        <p>Contador: {this.state.contador}</p>
        <button onClick={() => this.setState({ contador: this.state.contador + 1 })}>
          Incrementar
        </button>
      </div>
    );
  }
}

Componentes funcionais, por outro lado, são mais simples e são usados com Hooks para gerenciar o estado e os efeitos colaterais. Com a chegada dos Hooks, a funcionalidade dos componentes de classe foi sendo incorporada aos componentes funcionais, e acabou "caindo no gosto da galera" rs, e ficou bem popular.

Por exemplo:

import { useState } from 'react';

function MeuComponente() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Os componentes funcionais são mais leves e recomendados para novos projetos, enquanto os componentes de classe ainda são suportados, mas com menos uso.

Para fins de testes

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!