Componente Stateful

---

Os componentes stateful são responsáveis por gerenciar e manter um estado interno. Eles são definidos como classes que estendem a classe React.Component. Esses componentes têm a capacidade de reagir a eventos, atualizar seu próprio estado e, por consequência, acionar a renderização da interface.

Atenção

Nas versões anteriores a 16.8 do React, a única forma de criar componentes Stateful era por meio de componentes de classe, porém atualmente, após a adição dos React Hooks esta abordagem por classes entrou em desuso.

Características dos componentes Stateful:

• Mantêm um estado interno: Possuem um estado interno acessível através do método setState.
• Classes do ES6: São geralmente implementados como classes do ES6.

Toda vez que o estado de um componente mudar, via setState(), o método render() é chamado para renderizá-lo novamente, porém com o novo estado.

import React, { Component } from 'react';
 
class Contador extends Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }
 
  incrementarContador = () => {
    this.setState({ contador: this.state.contador + 1 });
  };
 
  render() {
    return (
      <div>
        <p>Contagem: {this.state.contador}</p>
        <button onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
}

Nota

Vale ressaltar que o método incrementarContador foi definido por meio de um arrow function, pois isso garante que o this referenciará a classe Contador e assim não é necessário realizar o bind, por exemplo

constructor(props) {
	super(props);
	this.incrementarContador = this.incrementarContador.bind(this);
	// ...
}
 
incrementarContador() {
	this.setState({ contador: this.state.contador + 1 });
}

O bind do this nesse cenário é necessário pelo fato da função declarada com function ser tratado como um objeto pelo JavaScript. Dessa forma, o this faz referência a esta primeira instância (função) e não a classe Contador (segunda instância).

Para reduzir ainda mais a verbosidade dos componentes de classe, é possível utilizar Class Fields do JavaScript e assim remover o uso do método construtor.

import React, { Component } from 'react';
 
class Contador extends Component {
  state = { contador: 0 };
 
  incrementarContador = () => {
    this.setState({ contador: this.state.contador + 1 });
  };
 
  render() {
    return (
      <div>
        <p>Contagem: {this.state.contador}</p>
        <button onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
}

Referências

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)