¿Qué es el estado en React y cómo gestionarlo?
En React, el estado representa los datos internos de un componente y determina su comportamiento y renderizado. Cada vez que el estado cambia, React vuelve a renderizar el componente para reflejar los nuevos datos.
El estado solo está disponible en los componentes de función mediante el hook useState, y en los componentes de clase mediante this.state.
Cómo gestionar el estado en React
1. Uso de useState en componentes funcionales
El hook useState permite definir y actualizar el estado en componentes funcionales.
Ejemplo:
import { useState } from "react";
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>Valor: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}
2. Uso de this.state en componentes de clase
En los componentes de clase, el estado se define en el constructor y se actualiza con setState().
Ejemplo:
import React, { Component } from "react";
class Contador extends Component {
constructor(props) {
super(props);
this.state = { contador: 0 };
}
incrementar = () => {
this.setState({ contador: this.state.contador + 1 });
};
render() {
return (
<div>
<p>Valor: {this.state.contador}</p>
<button onClick={this.incrementar}>Incrementar</button>
</div>
);
}
}3. Gestión global del estado
Para manejar el estado en aplicaciones grandes, se pueden usar bibliotecas como:
-
Context API: Para compartir estado entre componentes sin pasar
propsmanualmente. - Redux: Para gestionar estados complejos y centralizados.
- Recoil o Zustand: Alternativas ligeras a Redux para manejar el estado global.
Referencia
- Sitio oficial de React: https://react.dev/
Jorge García
Fullstack developer