State se utiliza para gestionar información o datos dentro de los componentes de React. A diferencia de los accesorios, los datos de estado se pueden cambiar durante la vida útil del componente.
En esta lección de nuestro curso completo y gratuito para principiantes sobre React 18, aprenderá cómo hacerlo.
Llevamos un tiempo creando componentes de React. Una cosa que quizás hayas notado es que nuestros componentes de React solo contenían datos estáticos. Sin embargo, también tendrás que lidiar regularmente con datos dinámicos cuando trabajes con React.
Aprendimos sobre los props en un tutorial anterior y cómo pasan datos de los componentes principales a los secundarios. Por otro lado, state se utiliza para gestionar información o datos dentro de los componentes. A diferencia de los props, los datos de state pueden cambiar durante la vida útil del componente.
Actualización de elementos renderizados
Creemos un generador de números aleatorios que nos proporcione un nuevo número aleatorio por encima de un valor mínimo cada dos segundos. El código del componente se vería así:
const rootElem = document.getElementById("root");
function RandomGenerator(props) {
let randomNumber = Math.floor(Math.random()*1000) + props.low;
setInterval(() => {
randomNumber = Math.floor(Math.random()*1000) + props.low;
}, 2000);
return (
<div class="container">
<h1>Random Number Generator</h1>
<h2>{randomNumber}</h2>
</div>
);
}
let randomElem = (
<>
<RandomGenerator low={500}/>
</>
);
ReactDOM.createRoot(rootElem).render(randomElem);Nuestro componente RandomGenerator devuelve dos elementos de encabezado envueltos dentro de un contenedor div. Estamos usando props para especificar el límite inferior de nuestro número aleatorio. Usamos setInterval() para establecer un nuevo valor para randomNumber cada dos segundos.
Probablemente espere que esto genere un nuevo número aleatorio que se mostrará en la página web cada dos segundos. Sin embargo, eso en realidad no sucede. El elemento que generamos a partir del componente solo representa cómo se vería en un momento específico en el que se generó.
Una solución a nuestro problema sería volver a renderizar el elemento cada dos segundos usando el siguiente código.
const rootElem = document.getElementById("root");
function RandomGenerator(props) {
let randomNumber = Math.floor(Math.random()*1000) + props.low;
return (
<div class="container">
<h1>Random Number Generator</h1>
<h2>{randomNumber}</h2>
</div>
);
}
let randomElem = (
<>
<RandomGenerator low={500}/>
</>
);
function refresh() {
ReactDOM.createRoot(rootElem).render(randomElem);
}
refresh();
setInterval(refresh, 2000);Usando state para actualizar componentes
Un problema con el código que escribimos anteriormente es que nuestro componente ya no es independiente. Se supone que debemos crear componentes encapsulados que administren su propio state y actualicen el DOM cuando sea necesario. También vuelve a representar todo el componente cuando se genera el número aleatorio, cuando solo debería actualizar el encabezado del número aleatorio.
En esta sección, actualizaremos nuestro componente para usar el state, de modo que no tengamos que realizar una llamada de renderizado desde fuera del componente para obtener nuestro número.
Hemos creado nuestro componente como una función aquí. En versiones anteriores de React, tendrías que convertir el componente de función en una clase para poder usar el state. Sin embargo, ahora podemos usar hooks para obtener la misma funcionalidad.
Los hooks son funciones especiales que le permiten usar funciones de React como el state dentro de los componentes de su función. Hay muchos hooks en React, pero aquí solo discutiremos el hook useState.
Llamar a useState() nos permite conservar algunas variables incluso después de que sale la función. En nuestro ejemplo, realizamos un seguimiento del valor de la variable número aleatorio. El único argumento que pasamos a useState() es el estado o valor inicial de nuestra variable. Luego devuelve un par de valores que tienen el estado actual y la función que actualiza el estado.
const rootElem = document.getElementById("root");
function RandomGenerator(props) {
const[randomNumber, setNumber] = React.useState(Math.floor(Math.random()*1000) + props.low);
setTimeout(() => setNumber(Math.floor(Math.random()*1000) + props.low), 2000);
return (
<div class="container">
<h1>Random Number Generator</h1>
<h2>{randomNumber}</h2>
</div>
);
}
let randomElem = (
<>
<RandomGenerator low={500}/>
</>
);
ReactDOM.createRoot(rootElem).render(randomElem);Llamamos a nuestra función setNumber() dentro de setTimeout cada dos segundos para obtener un nuevo número aleatorio. Hay algunas cosas a tener en cuenta aquí.
Puede parecer contrario a la intuición que estemos usando const para nuestra variable RandomNumber aquí, aunque su valor esté cambiando. El truco aquí es que la variable en realidad no cambia de valor dentro de una sola llamada a función. Siempre que llamamos a setNumber() para actualizar el valor de la variable, se activa una llamada a RandomGenerator() para volver a renderizar el componente. La variable randomNumber permanecerá constante durante cada uno de estos ciclos, por eso usamos const. También observe que no estamos usando ningún operador de asignación dentro de setNumber() para establecer un nuevo valor para randomNumber.
Quizás también te preguntes por qué no usamos setInterval() en lugar de setTimeout(). La razón es que el uso de setInterval() dará como resultado la creación de un nuevo intervalo con cada actualización. Usar setTimeout() nos permite realizar una actualización una vez cada dos segundos.
Conclusiones
Espero que este tutorial te haya ayudado a comprender cómo podemos usar state para administrar datos dinámicos dentro de nuestros componentes en React. Para practicar, intente actualizar el ejemplo anterior para que realice un seguimiento de la suma de todos los números aleatorios que estamos generando.
Puedes consultar el artículo original en inglés en: https://code.tutsplus.com/react-fundamentals-getting-started-with-state–cms-42009t