React State
Entendiendo el Estado en React
React es una biblioteca de JavaScript para construir interfaces de usuario que es conocida por su eficiente actualización y renderizado de componentes. Uno de los conceptos más importantes en React es el estado (state), que es lo que permite a los componentes reaccionar a cambios y mantener datos a lo largo del tiempo.
¿Qué es el Estado?
El estado es un objeto de JavaScript que se utiliza para almacenar propiedades o datos que controlan el comportamiento de un componente. Cada vez que el estado de un componente cambia, React vuelve a renderizar ese componente para reflejar esos cambios.
Uso del Estado en Componentes de Clase
En los componentes de clase, el estado se inicializa en el constructor y se accede a él a través de this.state. Para actualizar el estado, se debe utilizar this.setState(), que fusiona el objeto que se le pasa con el estado actual y programa una nueva renderización.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
Count: {this.state.count}
);
}
}
Uso del Estado en Componentes Funcionales con Hooks
Con la introducción de Hooks en React 16.8, los componentes funcionales pueden tener estado y otros rasgos sin escribir una clase. El Hook useState devuelve un par: el valor actual del estado y una función que lo actualiza.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
Count: {count}
);
}
Buenas Prácticas con el Estado
Con la introducción de Hooks en React 16.8, los componentes funcionales pueden tener estado y otros rasgos sin escribir una clase. El Hook useState devuelve un par: el valor actual del estado y una función que lo actualiza.
- No Modificar el Estado Directamente: Siempre usa
setState()o el método de actualización deuseStatepara cambios de estado. - Actualizaciones de Estado Asincrónicas: Las actualizaciones de estado pueden ser asincrónicas, por lo que para actualizaciones basadas en el estado anterior, usa una función en lugar de un objeto.
- Estado Derivado: Calcula propiedades derivadas necesarias durante el renderizado en lugar de almacenarlas en el estado.
State se actualiza de forma asíncrona
El estado se actualiza de forma asíncrona y el estado es constante en la renderización de un componente de React.
En este video, tratamos de mostrar cómo el State no actualiza los valores inmediatamente. Cuando cambias el estado de React a través de la función de actualización, se programa la operación de actualización, la cual se llevará a cabo cuando React lo decida, suele ser un proceso inmediato pero no siempre tiene por qué ser así. Cuando se cambia el valor del estado, a veces tenemos que tener en cuenta que esta operación no es inmediata y para cambiar el valor tenemos que usar una función, que tome como parámetro el valor antiguo del estado, pero esto es algo que no estamos viendo aquí. Esto lo veremos en un próximo post.
State no es un concepto exclusivo de React, aunque es un concepto clave de esta biblioteca. Para establecer los valores del Estado se utiliza la función useState, que es uno de los ‘hooks’ más importantes de la biblioteca.
Cuando se llama a la función useState, es React el que se encarga de establecer los valores del State y por eso declaramos los elementos devueltos por esta función como constantes. No manipulamos directamente las variables de State, por lo cual es correcto declarar como una constante la variable especial del State que maneja React en segundo plano.
Conclusión
El estado es una herramienta poderosa que, cuando se usa correctamente, puede hacer que tus componentes sean interactivos y dinámicos. Asegúrate de seguir las buenas prácticas para evitar problemas de rendimiento y bugs en tu aplicación.
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!