React.Component — componentes de classe e como funcionam

O que é React.Component?

React.Component é uma classe abstrata que fornece métodos integrados para trabalhar com estado, props e ciclo de vida do componente. Para criar um componente de classe, você define uma classe que estende React.Component e implementa o método render.

React.Component apareceu na primeira versão do React (2013) e permaneceu como a principal forma de criar componentes por cinco anos. O ecossistema React foi construído em torno de classes: componentes de ordem superior (HOC), render props, contexto — todos esses padrões foram implementados usando sintaxe de classes.

Com o lançamento do React 16.8 em 2019, a equipe do React apresentou os hooks como alternativa às classes. Os hooks resolviam os mesmos problemas — estado, efeitos, contexto — mas sem herança e vinculação complexa de contexto. React.Component continua totalmente suportado, mas a abordagem funcional é recomendada para novos projetos.

Criando um componente de classe

O componente de classe mínimo é uma classe com um único método render que retorna um elemento React. render é o único método obrigatório. Deve ser uma função pura de this.props e this.state: o mesmo conjunto de props e estado produz o mesmo resultado.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Construtor e inicialização do estado

O construtor executa antes da montagem. Ele chama super(props) para passar props para a classe pai e inicializa this.state. Usar o construtor para outros fins — assinaturas, chamadas de API — não é recomendado; para isso existe componentDidMount.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Gerenciamento de estado com this.state e this.setState

this.state é um objeto contendo os dados do componente. Mutá-lo diretamente (this.state.count = 1) é proibido — não aciona uma re-renderização e quebra a previsibilidade. O estado deve ser atualizado através de this.setState, que cria um novo objeto de estado e aciona uma re-renderização.

setState pode aceitar um objeto ou uma função. A forma funcional é preferível quando o novo estado depende do anterior: this.setState(prev => ({ count: prev.count + 1 })). O React pode agrupar várias chamadas setState em um único lote para otimização de desempenho.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Uma propriedade importante do setState é que ele é assíncrono. Após chamar setState, o estado não é atualizado imediatamente. Se precisar executar uma ação após a atualização, passe um callback como segundo argumento: this.setState(newState, () => console.log(this.state)).

Métodos do ciclo de vida

Componentes de classe têm métodos predefinidos que o React chama em momentos específicos. Montagem — constructor → render → componentDidMount. Atualização — render → componentDidUpdate. Desmontagem — componentWillUnmount.

ComponentDidMount — buscar dados

componentDidMount é o lugar principal para efeitos colaterais após a primeira renderização. Aqui são feitas solicitações HTTP, estabelecidas conexões WebSocket e iniciados temporizadores. Se você não limpar a assinatura em componentWillUnmount, ocorre um vazamento de memória.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Cancel request on unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Vinculação do contexto this em métodos

Em JavaScript, os métodos de classe não são vinculados à instância por padrão. Se você passar um método como callback — para um manipulador de eventos, para um temporizador — this será undefined (no modo estrito) ou window (sem modo estrito). Sem vinculação, this.setState lançará um erro.

Há três formas de vincular: bind no construtor, uma função arrow no callback e um class field com função arrow. O primeiro método é a recomendação oficial do React: vincular uma vez no construtor, sem recriar a função em cada renderização.

// Method 1: bind in constructor (recommended)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class fields — sintaxe moderna com vinculação automática. Uma função arrow em uma propriedade de classe captura this do escopo do construtor. A desvantagem é que o método é criado em cada instância, não no protótipo, aumentando o uso de memória para centenas de componentes do mesmo tipo.

Componentes de classe vs funcionais

A escolha entre classe e função não é apenas uma questão de sintaxe. Componentes funcionais com hooks resolvem problemas inerentes às classes: duplicação de lógica em diferentes métodos do ciclo de vida (componentDidMount + componentDidUpdate), complexidade com this e a incapacidade de extrair lógica relacionada em um bloco reutilizável.

Componentes funcionais são mais fáceis de testar — eles não têm estado interno (que antes dos hooks só estava disponível em classes) e não exigem montagem no DOM para verificar callbacks. O React recomenda componentes funcionais para todos os novos projetos; a documentação e exemplos são escritos com eles.

Componentes de classe continuam sendo a melhor escolha ao trabalhar com código legado. Se um projeto foi iniciado antes de 2019, ele provavelmente contém milhares de componentes de classe. Reescrever todos eles para hooks em um único sprint é arriscado. O React garante compatibilidade reversa: componentes de classe não serão removidos.

Estratégia de migração de classes para hooks

A migração gradual começa analisando o componente. Componentes simples sem estado são traduzidos primeiro — eles são trivialmente substituídos por funções. Depois — componentes com um ou dois campos de estado, onde useState substitui diretamente this.state e this.setState.

Componentes complexos com vários métodos do ciclo de vida são traduzidos usando useEffect. A lógica de componentDidMount + componentDidUpdate é dividida em chamadas separadas de useEffect com dependências diferentes. componentWillUnmount é substituído por uma função de retorno dentro de useEffect. Para lógica de estado complexa, use useReducer.

Ferramentas de migração automatizada — @phenomnomnominal/ts-react-class-to-hook ou scripts codemod — podem converter classes simples automaticamente. Para casos complexos, a migração continua sendo um trabalho manual que requer entendimento da lógica do componente original.