Componentes de clase en React: estado, ciclo de vida y hooks

Un componente de clase es una clase de JavaScript que extiende React.Component y devuelve JSX desde un método render(). Lee las props de this.props, guarda el estado en this.state y lo actualiza con this.setState(). Los componentes de función con hooks los reemplazaron para el código nuevo, pero las clases siguen siendo totalmente compatibles, aparecen en mucho código antiguo y son la única forma de escribir un 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 su propio estado. Agrega un tercer <Counter label="Plums" /> y también empieza en 0.

La anatomía de un componente de clase

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>;
    }
}

• La clase extiende Component (o React.Component con import React from 'react').
• render() es obligatorio. Debe ser puro, como el cuerpo de un componente de función: lee this.props y this.state, devuelve JSX.
• this.props contiene las props. Son de solo lectura.
• El estado se puede definir en un constructor (llama primero a super(props)) o, más habitual hoy, como campo de clase: state = { visits: 1 };.
• static defaultProps sigue funcionando para las clases en React 19 (solo se eliminó para los componentes de función).

this.setState combina, y puede recibir una función de actualización

setState hace dos cosas de forma distinta al setter de useState. Combina el objeto que pasas con el estado actual, así que solo actualizas las claves que nombras. Y, como toda actualización de estado de React, no se aplica de inmediato, así que usa la forma de actualización cuando el siguiente valor depende del 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" suma uno, porque las tres llamadas leen el mismo this.state.likes. "+3 with updaters" suma tres. "Move to Paris" conserva name y likes (la combinación) pero pierde zip, porque la combinación solo llega a un nivel de profundidad. Escribe address: { ...this.state.address, city: 'Paris' } para conservarlo. El segundo argumento opcional de setState se ejecuta después de la actualización, y la consola muestra ahí la nueva dirección.

Enlazar manejadores de eventos

Un método pasado como onClick={this.handleClick} se llama más tarde como una función normal, sin su objeto, así que this dentro de él es 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 />;
}

El primer botón registra un TypeError sobre leer setState de undefined. El segundo funciona, porque una función flecha en un campo de clase captura this cuando se crea la instancia. La solución antigua, todavía común en código heredado, enlaza en el constructor:

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

Una flecha en línea, onClick={() => this.handleClick()}, también funciona.

Métodos de ciclo de vida

Las clases reaccionan al montaje, la actualización y el desmontaje mediante métodos con nombres fijos. Los que más verás:

• componentDidMount(): cuando el primer renderizado está en el DOM. Inicia temporizadores, suscripciones, peticiones.
• componentDidUpdate(prevProps, prevState): después de cada actualización. Compara con los valores anteriores antes de hacer trabajo, o entrarás en un bucle.
• componentWillUnmount(): antes de quitarse. Deshace lo que inició componentDidMount.
• shouldComponentUpdate(nextProps, nextState): devuelve false para saltarte un renderizado.

La página de ciclo de vida de componentes tiene la lista completa, el orden en que se ejecutan y un componente que registra cada uno.

Convertir una clase en un componente de función

Aquí tienes una clase que usa los tres métodos de ciclo de vida habituales. Avanza cada segundo, registra cuando cambia su prop label y detiene su temporizador cuando se quita.

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>
    );
}

Y el mismo componente como función. Cada método de ciclo de vida pasa a formar parte de un efecto, y la configuración y la limpieza relacionadas quedan juntas en lugar de en dos 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>
    );
}

Ambos temporizadores cuentan igual y registran en cada cambio de etiqueta. La versión de función además registra una vez al montar, porque un efecto también se ejecuta después del primer renderizado. Los pasos para cualquier conversión:

1. this.props.x pasa a ser una prop desestructurada, { x }.
2. Cada clave de this.state pasa a ser su propio useState. Recuerda que el setter reemplaza en lugar de combinar.
3. Los métodos pasan a ser funciones normales dentro del componente. No hace falta enlazarlos.
4. componentDidMount, componentDidUpdate y componentWillUnmount pasan a ser llamadas a useEffect, agrupadas por lo que hacen y no por cuándo se ejecutan.
5. createRef pasa a ser useRef, y static contextType con this.context pasa a ser useContext o use.

Deja los error boundaries como clases; no tienen equivalente en funciones.

PureComponent

Un componente de clase normal renderiza cada vez que lo hace su padre. PureComponent compara primero las props y el estado nuevos con los anteriores, a un nivel de profundidad, y se salta el renderizado cuando nada cambió. Es la contraparte de clase de 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>
    );
}

Haz clic en el botón: solo se registra PlainLabel rendered, porque PureLabel ve el mismo text. Pasa text={'hello ' + clicks} a ambos y los dos renderizan en cada clic.

La comparación es superficial, así que una prop que es un objeto o una función nueva en cada renderizado del padre (style={{ color: 'red' }}, onClick={() => ...}) la anula. Es la misma trampa que con React.memo.

Lo que React 19 quitó de las clases

Si mantienes código de clases antiguo, algunos patrones ya no funcionan en React 19:

• String refs (ref="input" con this.refs.input). Usa createRef() o una ref callback.
• Contexto heredado (contextTypes, childContextTypes, getChildContext). Usa createContext con static contextType.
• propTypes se ignoran. Usa TypeScript o tus propias comprobaciones.
• findDOMNode desapareció. Pon una ref en el elemento del DOM.

Los viejos métodos componentWillMount, componentWillReceiveProps y componentWillUpdate también son heredados. Siguen ejecutándose, tanto con los nombres antiguos como con los nombres UNSAFE_ (UNSAFE_componentWillMount y demás), pero están obsoletos y StrictMode avisa sobre ellos; mueve su código a componentDidMount, componentDidUpdate o getDerivedStateFromProps.