Componentes de classe no React: estado e ciclo de vida

Um componente de classe é uma classe JavaScript que estende React.Component e retorna JSX de um método render(). Ele lê as props de this.props, guarda o estado em this.state e o atualiza com this.setState(). Componentes de função com hooks os substituíram em código novo, mas as classes continuam totalmente suportadas, aparecem em muitos códigos mais antigos e são a única forma de escrever um error boundary.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Cada contador guarda o próprio estado. Adicione um terceiro <Counter label="Plums" /> e ele também começa em 0.

A anatomia de um componente de classe

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• A classe estende Component (ou React.Component com import React from 'react').
• render() é obrigatório. Ele precisa ser puro, como o corpo de um componente de função: ler this.props e this.state e retornar JSX.
• this.props guarda as props. Elas são somente leitura.
• O estado pode ser definido em um constructor (chame super(props) antes) ou, o mais comum hoje, como class field: state = { visits: 1 };.
• static defaultProps continua funcionando para classes no React 19 (ele só foi removido para componentes de função).

this.setState mescla e aceita uma função de atualização

O setState faz duas coisas de um jeito diferente do setter do useState. Ele mescla o objeto que você passa com o estado atual, então você atualiza só as chaves que nomear. E, como toda atualização de estado no React, ele não é aplicado na hora, então use a forma com função de atualização quando o próximo valor depender do anterior.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

"+3 with objects" soma um, porque as três chamadas leem o mesmo this.state.likes. "+3 with updaters" soma três. "Move to Paris" mantém name e likes (a mesclagem), mas perde zip, porque a mesclagem só tem um nível de profundidade. Escreva address: { ...this.state.address, city: 'Paris' } para mantê-lo. O segundo argumento opcional do setState executa depois da atualização, e o console mostra o novo endereço ali.

Fazendo o bind dos event handlers

Um método passado como onClick={this.handleClick} é chamado depois como uma função comum, sem o objeto, então this dentro dele é undefined.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

O primeiro botão registra um TypeError sobre ler setState de undefined. O segundo funciona, porque uma arrow function em um class field captura o this quando a instância é criada. A correção mais antiga, ainda comum em código legado, faz o bind no construtor:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

Uma arrow inline, onClick={() => this.handleClick()}, também funciona.

Métodos de ciclo de vida

As classes reagem à montagem, à atualização e à desmontagem por meio de métodos com nomes fixos. Os que você mais vai ver:

• componentDidMount(): depois que a primeira renderização está no DOM. Inicie timers, assinaturas, requisições.
• componentDidUpdate(prevProps, prevState): depois de cada atualização. Compare com os valores anteriores antes de fazer algo, ou você entra em loop.
• componentWillUnmount(): antes da remoção. Desfaça o que o componentDidMount iniciou.
• shouldComponentUpdate(nextProps, nextState): retorne false para pular uma renderização.

A página sobre o ciclo de vida dos componentes tem a lista completa, a ordem em que executam e um componente que registra cada um deles.

Convertendo uma classe em um componente de função

Aqui está uma classe que usa os três métodos de ciclo de vida mais comuns. Ela conta a cada segundo, registra quando a prop label muda e para o timer quando é removida.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

E o mesmo componente como função. Cada método de ciclo de vida vira parte de um efeito, e o setup e a limpeza relacionados ficam lado a lado em vez de em dois métodos.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Os dois timers contam do mesmo jeito e registram a cada mudança de rótulo. A versão em função também registra uma vez na montagem, já que um efeito também executa depois da primeira renderização. Os passos de qualquer conversão:

1. this.props.x vira uma prop desestruturada, { x }.
2. Cada chave de this.state vira o próprio useState. Lembre que o setter substitui em vez de mesclar.
3. Os métodos viram funções comuns dentro do componente. Sem necessidade de bind.
4. componentDidMount, componentDidUpdate e componentWillUnmount viram chamadas de useEffect, agrupadas pelo que fazem e não por quando executam.
5. createRef vira useRef, e static contextType com this.context vira useContext ou use.

Deixe os error boundaries como classes; eles não têm equivalente em função.

PureComponent

Um componente de classe normal renderiza toda vez que o pai renderiza. O PureComponent primeiro compara as novas props e o novo estado com os anteriores, em um nível de profundidade, e pula a renderização quando nada mudou. Ele é o equivalente em classe do React.memo.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

Clique no botão: só PlainLabel rendered é registrado, porque PureLabel vê o mesmo text. Passe text={'hello ' + clicks} para os dois e os dois renderizam a cada clique.

A comparação é superficial, então uma prop que é um novo objeto ou uma nova função a cada renderização do pai (style={{ color: 'red' }}, onClick={() => ...}) a anula. É a mesma armadilha do React.memo.

O que o React 19 removeu das classes

Se você mantém código antigo com classes, alguns padrões não funcionam mais no React 19:

• String refs (ref="input" com this.refs.input). Use createRef() ou uma ref callback.
• Context legado (contextTypes, childContextTypes, getChildContext). Use createContext com static contextType.
• propTypes são ignorados. Use TypeScript ou suas próprias verificações.
• findDOMNode não existe mais. Coloque uma ref no elemento do DOM.

Os antigos métodos componentWillMount, componentWillReceiveProps e componentWillUpdate também são legados. Eles ainda executam, tanto com os nomes antigos quanto com os nomes UNSAFE_ (UNSAFE_componentWillMount e assim por diante), mas estão descontinuados e o StrictMode avisa sobre eles; leve o código deles para componentDidMount, componentDidUpdate ou getDerivedStateFromProps.