useState: la caja de juguetes

Imagina que tienes una caja de juguetes, en ella se pueden guardar todos los juguetes que quieras, y cuando quieras jugar con alguno de ellos, solo tienes que abrir la caja y sacarlo. En React, la caja de juguetes es el estado, y los juguetes son los datos que queremos guardar en el estado. Para manipular el estado, React nos provee de un hook llamado useState.

Por ahora no nos preocuparemos de que es un hook, pensemos en él como una función que nos devuelve dos cosas: el valor actual del estado y una función para actualizarlo. Y se ve algo así:

const [miCajaDeJuguetes, guardarJuguetes] = useState([]);

En esta línea de código miCajaDeJuguetes es el valor actual del estado, y guardarJuguetes es la función que nos permite actualizarlo. La caja en principio está vacía (por eso escribimos []), pero podemos llenarla con juguetes más tarde.

Imagina que tenemos un Yo-yo que queremos guardar en la caja de juguetes. Podemos hacerlo de la siguiente manera:

guardarJuguetes([...miCajaDeJuguetes, '🪀']);

Como vemos, llamamos a la función guardarJuguetes, que nos devuelve useState para actualizar el estado, o en este caso el contenido de nuestra caja de juguetes. Como primer parametro del array utilizamos el spreadOperator ...miCajaDeJuguetes, que significa que estamos guardando todo lo que ya estaba en la caja, y luego, como segundo parametro, agregamos el nuevo yo-yo.

Con la misma función podemos vaciar la caja de juguetes:

guardarJuguetes([]);

Veamos un ejemplo

Imagina que tienes una aplicación donde puedes colorear dibujos en la pantalla. La aplicación tiene a disposición del usuario una gran cantidad de colores, y a medida que se van utilizando algunos, muestra en un apartado los colores utilizados. Nuestro estado ahora ya no es una caja de juguetes, sino un array con los colores usados o usedColors.

import { useState } from 'react';
 
export default function App() {
  const [usedColors, setUsedColors] = useState([])

  return (
  <div>
    <h1>Colores utilizados:</h1>
    <ul>
      {usedColors.map((color) => (
        <li key={color}>{color}</li>
      ))}
    </ul>
  </div>) 

}

Ahora, vamos a agregar dos cosas, una lista de colores para podes seleccionar y una función que llamaremos al hacerlo que agregue los colores a nuestro estado.

import { useState } from 'react'

export default function App() {
  const [usedColors, setUsedColors] = useState([])

  const onSelectColor = (color) => {
    setUsedColors([...usedColors, color])
  }


  return (
    <div>
      <h1>Colores utilizados:</h1>
      <ul>
        {usedColors.map((color) => (
          <li key={color}>{color}</li>
        ))}
      </ul>
      <h2>Selecciona un color:</h2>
      <ul>
        <li onClick={() => onSelectColor('🔴')}>🔴</li>
        <li onClick={() => onSelectColor('🟠')}>🟠</li>
        <li onClick={() => onSelectColor('🟡')}>🟡</li>
        <li onClick={() => onSelectColor('🟢')}>🟢</li>
        <li onClick={() => onSelectColor('🔵')}>🔵</li>
        <li onClick={() => onSelectColor('🟣')}>🟣</li>
        <li onClick={() => onSelectColor('⚫')}>⚫</li>
        <li onClick={() => onSelectColor('⚪')}>⚪</li>
      </ul>
    </div>) 

}

Funciona, ¿verdad? con este ejemplo se puede ver como funciona React, si inspeccionamos los elementos veremos que al agregar colores en nuestro estado lo único que se recarga es el listado de colores usados, no toda la página.

Ahora, vamos a corregir un bug que tenemos: Al seleccionar un color, se agrega a la lista de colores utilizados, pero si lo volvemos a seleccionar aparece nuevamente, esto no debería suceder.

import { useState } from 'react'
import styles from './App.module.css'
export default function App() {
  const [usedColors, setUsedColors] = useState([])

  const onSelectColor = (color) => {
    const isColorUsed = usedColors.includes(color)

    if (!isColorUsed) {
      setUsedColors([...usedColors, color])
    }
  }

  const colors = ['🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '⚫', '⚪']

  return (
    <div>
      <h1>Colores utilizados:</h1>
      <ul className={styles.list}>
        {usedColors.map((color) => (
          <li key={color}>{color}</li>
        ))}
      </ul>
      <h2>Selecciona un color:</h2>
      <ul className={styles.list}>
        {colors.map((color) => (
          <li key={color} onClick={() => onSelectColor(color)}>
            {color}
          </li>
        ))}
      </ul>
    </div>) 
}

¡Perfecto! ahora nuestro código funciona como se esperaría.

Todavía nos faltan algunas cosas por conocer sobre “useState” pero con esto ya podemos hacernos una idea de su uso. Dejo el enlace a la documentación oficial de React para que puedan seguir aprendiendo sobre este tema y ver otros ejemplos. React.dev: useState