¿Sabes qué es el estado (state) en un componente de react ?
Si quieres aprender qué es el estado en React y cómo funciona este elemento, estás en el artículo adecuado.
React es una librería JavaScript ideal para crear interfaces de usuario en el proceso de desarrollar una aplicación de una sola página. Para ello, React utiliza una extensión de JavaScript que tiene una sintaxis muy similar a HTML: JSX. Con este lenguaje, podemos crear elementos y componentes a los que les podemos pasar todo tipo de propiedades. Sin embargo, estos solo nos permitirán crear aplicaciones estáticas. Por ello, en este post, te enseñaremos cómo funciona el estado en React, un elemento fundamental para crear dinamismo en nuestras aplicaciones.
¿Qué es el estado en React?
El estado en React es una de las maneras en las que se procesan datos en esta librería de JavaScript. Desde el punto de vista de los datos que React puede manejar, tenemos el objeto props, con el que podemos insertar todo tipo de propiedades a un elemento, y tenemos los estados react .
Como puedes leer en nuestro post sobre cómo añadir estilos a un elemento React, el objeto props nos permite insertar datos estáticos. Con esto nos referimos a que pasamos propiedades a un componente o elemento que luego se renderiza o visualiza de una determinada manera, con base a los datos que le pasamos. Entonces, si necesitamos darle dinamismo a un elemento, es decir, datos que se modifiquen a lo largo del tiempo, necesitaremos utilizar el estado en React.
El estado en React, también conocido como state, es el segundo tipo de dato que maneja esta librería de JavaScript. Mientras que las props son los datos que podemos pasarle a un componente o elemento React desde afuera, un estado se conforma por los datos internos que un componente puede manejar. A medida que estos datos son modificados, ya sea por una interacción del usuario o por una recepción de datos de la API, el estado será modificado. Entonces, cada cambio de ese estado provocará que el elemento o componente se renderice de nuevo con una nueva representación en pantalla.
Ten presente que podemos utilizar un estado en cualquier tipo de componente o elemento, sea del nivel más bajo o el nivel más alto. Allá donde necesitemos datos que cambian a lo largo del tiempo, podemos utilizar un estado.
¿Cómo utilizar el estado en React?
Para ejemplificar cómo podemos utilizar el estado en React, modificaremos la aplicación clock que sale de nuestro post sobre crear un reloj en React. Por tanto, tenemos las siguientes líneas de código:
// salto de linea react native
<html>
<script type = “text/babel”>
const rootElement =document.getElementById (‘root’)
function tick () {
const now = new Date ().toLocaleTimeString()
const element = (
<div className = “container”>
<span className = “clock”> {now} </span>
</div>
);
ReactDOM.render (element, rootElement);
)
tick ();
setInterval (tick, 1000);
</script>
</html>
En las anteriores líneas de código, la función tick crea un nuevo elemento que, a su vez, guarda la hora actual. Luego, esta función se repite cada segundo utilizando el método setInterval de JavaScript. A continuación, reemplazaremos esta escritura por una más nativa a React. Para ello, primero reemplazaremos la función JavaScript tick con un componente React.
El componente, a continuación, nos permite crear un reloj que maneje un estado. Este estado guardará la hora del mismo modo que lo hace la constante now.
<html>
<script type = “text/babel”>
const rootElement =document.getElementById (‘root’)
const Clock = () => {
const [now, setNow] = React.useState (new Date ().toLocaleTimeString()
return
<div className = “container”>
<span className = “clock”> {now} </span>
</div>
}
ReactDOM.render (<Clock/>, rootElement);
</script>
</html>
Como puedes ver, hemos reemplazado la función tick por el componente Clock, inicializado con mayúsculas. Este componente es de tipo función. Para conocer más sobre la escritura de este objeto, te invitamos a leer nuestro post sobre los componentes en React.
Dentro de nuestro componente, insertamos un estado para hacer que la hora cambie cada segundo, pues los estados los usamos para datos que cambian. En el caso de nuestro reloj, la variable que cambiaba era now, por lo que la transformamos en estado usando el comando React.useState. Si quieres saber ahora cómo crear una función para que este estado cambie cada segundo, te invitamos a leer nuestro post sobre crear un reloj con botón en React.
Como último paso, renderizamos el elemento que resulta de esta función utilizando el código JSX <Clock/>.
¿Te animas a seguir aprendiendo?
Al leer este post has aprendido qué es y cómo funciona el estado en React, uno de los elementos más importantes de esta librería de JavaScript. Sin embargo, ¡todavía queda mucho que aprender para dominar esta herramienta! Te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a dominar lenguajes y herramientas de programación para la web como HTML, CSS, JavaScript y React. ¡Anímate a seguir aprendiendo e inscríbete ya!
