React.Component — componentes de clase y cómo funcionan

¿Qué es React.Component?

React.Component es una clase abstracta que proporciona métodos integrados para trabajar con el estado, las props y el ciclo de vida del componente. Para crear un componente de clase, debes definir una clase que extienda React.Component e implementar el método render.

React.Component apareció en la primera versión de React (2013) y siguió siendo la forma principal de crear componentes durante cinco años. El ecosistema de React se construyó alrededor de las clases: componentes de orden superior (HOC), render props, contexto — todos estos patrones se implementaron mediante sintaxis de clases.

Con el lanzamiento de React 16.8 en 2019, el equipo de React presentó los hooks como alternativa a las clases. Los hooks resolvían los mismos problemas — estado, efectos, contexto — pero sin herencia ni vinculación compleja del contexto. React.Component sigue siendo totalmente compatible, pero el enfoque funcional se recomienda para nuevos proyectos.

Crear un componente de clase

El componente de clase mínimo es una clase con un único método render que devuelve un elemento React. render es el único método obligatorio. Debe ser una función pura de this.props y this.state: el mismo conjunto de props y estado produce el mismo resultado.

import React, { Component } from 'react';

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

Constructor e inicialización del estado

El constructor se ejecuta antes del montaje. Llama a super(props) para pasar las props a la clase padre e inicializa this.state. No se recomienda usar el constructor para otros fines — suscripciones, llamadas API — para eso está componentDidMount.

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

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

Gestión del estado con this.state y this.setState

this.state es un objeto que contiene los datos del componente. Mutarlo directamente (this.state.count = 1) está prohibido — no provoca un rerenderizado y rompe la previsibilidad. El estado debe actualizarse mediante this.setState, que crea un nuevo objeto de estado y desencadena un rerenderizado.

setState puede aceptar un objeto o una función. La forma funcional es preferible cuando el nuevo estado depende del anterior: this.setState(prev => ({ count: prev.count + 1 })). React puede agrupar varias llamadas a setState en un solo lote para optimizar el rendimiento.

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

Una propiedad importante de setState es que es asíncrono. Después de llamar a setState, el estado no se actualiza inmediatamente. Si necesitas realizar una acción después de la actualización, pasa un callback como segundo argumento: this.setState(newState, () => console.log(this.state)).

Métodos del ciclo de vida

Los componentes de clase tienen métodos predefinidos que React llama en momentos específicos. Montaje — constructor → render → componentDidMount. Actualización — render → componentDidUpdate. Desmontaje — componentWillUnmount.

ComponentDidMount — obtener datos

componentDidMount es el lugar principal para efectos secundarios después del primer renderizado. Aquí se realizan solicitudes HTTP, se establecen conexiones WebSocket y se inician temporizadores. Si no limpias la suscripción en componentWillUnmount, se produce una fuga de memoria.

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

Vinculación del contexto this en métodos

En JavaScript, los métodos de clase no están vinculados a la instancia por defecto. Si pasas un método como callback — a un manejador de eventos, a un temporizador — this será undefined (en modo estricto) o window (sin modo estricto). Sin vinculación, this.setState lanzará un error.

Hay tres formas de vincular: bind en el constructor, una función flecha en el callback y un class field con función flecha. El primer método es la recomendación oficial de React: vincular una vez en el constructor, sin recrear la función en cada renderizado.

// 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 — sintaxis moderna con vinculación automática. Una función flecha en una propiedad de clase captura this del ámbito del constructor. La desventaja es que el método se crea en cada instancia, no en el prototipo, lo que aumenta el uso de memoria para cientos de componentes del mismo tipo.

Componentes de clase vs funcionales

La elección entre clase y función no es solo cuestión de sintaxis. Los componentes funcionales con hooks resuelven problemas inherentes a las clases: duplicación de lógica en diferentes métodos del ciclo de vida (componentDidMount + componentDidUpdate), complejidad con this y la imposibilidad de extraer lógica relacionada en un bloque reutilizable.

Los componentes funcionales son más fáciles de probar — no tienen estado interno (que antes de los hooks solo estaba disponible en las clases) y no requieren montaje en el DOM para verificar callbacks. React recomienda componentes funcionales para todos los proyectos nuevos; la documentación y los ejemplos se escriben con ellos.

Los componentes de clase siguen siendo la mejor opción al trabajar con código heredado. Si un proyecto se inició antes de 2019, probablemente contenga miles de componentes de clase. Reescribirlos todos a hooks en un solo sprint es arriesgado. React garantiza compatibilidad hacia atrás: los componentes de clase no serán eliminados.

Estrategia de migración de clases a hooks

La migración gradual comienza analizando el componente. Los componentes simples sin estado se traducen primero — se reemplazan trivialmente por funciones. Luego — componentes con uno o dos campos de estado, donde useState reemplaza directamente this.state y this.setState.

Los componentes complejos con múltiples métodos del ciclo de vida se traducen usando useEffect. La lógica de componentDidMount + componentDidUpdate se divide en llamadas separadas a useEffect con diferentes dependencias. componentWillUnmount se reemplaza por una función de retorno dentro de useEffect. Para lógica de estado compleja, usa useReducer.

Las herramientas de migración automatizada — @phenomnomnominal/ts-react-class-to-hook o scripts codemod — pueden convertir clases simples automáticamente. Para casos complejos, la migración sigue siendo trabajo manual que requiere comprender la lógica del componente original.