useState( ) – Manejo de estados en ReactJS

El estado de un componente en ReactJS son valores que son contenidos por el mismo componente. Por ejemplo, el estado de un contador es el valor que tenga actualmente el componente. Es decir, la «variable» contador es el estado ya que al cambiarlo el componente se redibuja y muestra el nuevo valor o mejor dicho, el nuevo estado.

En mi canal de Youtube hice un vídeo explicandolo mucho más a detalle, si quieres verlo te lo dejo por aquí, no olvides suscribirte si te gusto o te sirvió. También recuerda compartirlo:

Creación del proyecto de ejemplo

Para explicar una funcionalidad o un concepto, lo mejor es hacerlo con un ejemplo o varios. Es por eso que crearemos una aplicación en ReactJS para poder ilustrar mejor lo que estamos trabajado. Es por eso que recomiendo que uses su computadora para que vayas haciendo el ejemplo junto a mi. Al final dejaré el código completo para que puedas descargarlo.

Para empezar creemos un proyecto. Yo lo hago con yarn pero tu puedes usar npm si te es más cómodo. Para crear un proyecto con yarn solo debemos escribir en la consola:

yarn create vite

Esto nos abrirá un menú en la consola donde podremos poner el nombre del proyecto, elegir React para trabajar y Javascript como lenguaje de programación. Luego haremos algunos proyectos con Typescript, la forma que considero más profesional en el mundo del desarrollo web.

Para lanzar el proyecto solo tenemos que entrar a la capeta que se creo con el nombre del proyecto y ejecutar el comando:

cd project-name

yarn dev

Esto correré el proyecto en modo desarrollo y podremos entrar a él mediante el navegador entrando a la dirección que nos aparezca en consola.

Si eres capaz de ver el proyecto en tu navegador, entonces podemos seguir con el contenido del artículo. Es importante que seas capaz de ver el proyecto funcionando, si tienes algún problema relacionado con la creación de proyecto, puede ver el siguiente vídeo en donde explico las diferentes formas de crear proyectos en ReactJS.

Podría interesarte: Formas de crear proyectos en ReactJS

Limpiando el componente App.jsx

Ya que vamos a aprender un concepto nuevo para usarlo en nuestas aplicaciones complejas, es bueno entender qué es parte de useState y para qué sirve. Con ese proposito, recomiendo limpiar el componente App.jsx que se crea por defecto. En ese archivo está el código que vemos en la aplicación en línea. Lo dejaremos así:

import './App.css'

function App() {

  return (
    <>
      <h1>Hola Mundo</h1>
    </>
  )
}

export default App

Con esto, nuetro componente quedaría completamente limpio y solo tendríamos un Hola Mundo en pantalla. A partir de aquí comenzaremos a comprender el problema que soluciona el useState.

Agregando el estado con useState

import { useState } from 'react'

import './App.css'

function App() {

  const [contador, setContador] = useState(0);

  const sumar = () => {
    setContador(contador + 1);
    console.log(contador);
  }

  return (
    <>
      <h1>Hola Mundo</h1>
      <hr />
      <h2>Contador: {contador}</h2>
      <button onClick={sumar} >Sumar</button>

    </>
  )
}

export default App

Como puedes ver en el código que está justo arriba, en la primera línea importamos el hook directamente desde «react» ya que es una funcionalidad que ya está incluida en el core de la librería. Lo siguiente importante sucede en la línea número 7 donde estamos usando el hook useState.

Cuando usamos el hook useState nos reporta 2 valores en forma de array. El primero (en este caso ‘contador‘) es el valor del estado, es decir el valor que tiene actualmente almacenado el componente. El segundo (en este caso ‘setContador‘) es una función que puede modificar el valor del estado actual, esta se utiliza cuando queremos cambiar este estado.

También vale la pena resaltar el valor que se encuentra dentro de los parecentes al ejecutar la función useState( valor ). En este caso el valor es un 0 y como podrás deducir, este es el valor inicial que tendrá el estado al cargar. Cuando el componente se monte o se cargue, el contador tendrá un valor inicial de 0.

En el ejemplo se creo una función que luego se asigno el evento onClick de un botón. La función simplemente aumenta en 1 al estado. Este es el uso más sencillo que podemos hacer de un estado con useState.

Consideraciones

Cuando trabajamos con useState y funciones hay ciertas consideraciones que creo debes tener en cuenta, algunas de las más importantes las comento más a detalle y con ejemplos en el vídeo de arriba sobre useState de React JS pero me gustaría mencionarlas aquí también.

1. Momento de la actualización. El console.log que vemos después de la actualización del estado en la funciona sumar del ejemplo, no imprime el valor ya actualizado, sino que le valor anterior. Esto es importante saberlo y entender por qué funciona así. Tiene que ver con que al momento en que React actualiza su estado, el log ya se ha ejecutado.
2. Renderización. Cuando actualizamos un estado que está siendo impreso en pantalla, la única parte del DOM que se va a ejecutar o a cambiar es la que esté siendo afectada por dicho estado. Esto significa que le componente no se redibuja, únicamente la acción que sea extrictamente necesaria.
3. Manejo de estados con objetos. Cuando cambiamos un estado este cambia totalmente, así que si solo queremos cambiar una propiedad de un objeto en un estado de useState, tendremos que cambiar todo el objeto, es decir, enviarlo completo, de preferencia mediante el Operador SPREAD.

En definitiva, el correcto uso de los estados en ReactJS es indispensable para tener una aplicación eficiente y que pueda escalar a ser una gran aplicación usada por miles de personas. Si te quieres dedicar al desarrollo de aplicaciones con ReactJS, un correcto uso del estado de un componente es crucial para tu desarrollo como programador.