Los estados y el uso del hook useState en React JS

Última actualización: 01 - 11 - 2023

¿Qué es un estado (state) en React JS?

Un estado es un valor por defecto de una variable o un componente de nuestra aplicación. Este puede ser general (un state que va a cubrir toda la app) o individual (un state que va a afectar un componente en específico).

Los valores predeterminados de un estado pueden ser cualquier tipo de dato: strings, números, objetos, arreglos o booleanos.

Estos datos pueden tener cualquier tipo de información según sea el caso o pueden empezar con un valor "vacío" que se puede ir llenando dependiendo de la interacción del usuario. Como rellenar un formulario o un evento click.

{/* Ejemplos */}

const [string, setString] = useState("")
const [string2, setString2] = useState("Valores predeterminados como string")

const [number, setNumber] = useState(0)
const [number2, setNumber2] = useState(10)

const [object, setObject] = useState({})
const [object2, setObject2] = useState({propiedad:"valor"})

const [array, setArray] = useState([])
const [array2, setArray2] = useState([indice1, indice2])

const [boolean, setBoolean] = useState(true)

1. 1️⃣ El flujo de la información es unidireccional

Esto quiere decir que los datos que se van a pasar entre componentes sólo se hará de padre a hijo utilizando Props.

2. 2️⃣ El cambio de un estado genera el renderizado en el componente donde se esté usando

Gracias al Virtual DOM, React va a detectar el cambio en el componente específico donde se realizó el cambió y no renderizará de nuevo toda la página por solo ese cambio.

3. 3️⃣ Los estados no se modifican directamente

Para ello se utiliza la función que nos ofrece el Hook useState.

4. 4️⃣ Un componente puede ser stateless (sin estado)

Puede mostrar información de forma estática con HTML y CSS.

¿Cómo cambiar un estado?
El uso del hook useState para definir un estado en una aplicación de React JS

Para utilizar el hook useState se debe importar en el componente donde lo vayamos a utilizar.

import { useState } from 'react'

Dentro del componente, en este caso forceUser, se define el uso del state con la siguiente sintaxis:

const forceUser  = ( ) => {

   const [lightSaber, setLightSaber] = useState("")

   return (
      <>
      </>
   )

}

export default forceUser

El primer índice de este array desestructurado (lightSaber) es la variable que contiene el valor del estado del componente.

El segundo índice es la función que va a modificar el estado de la variable. Por convención se nombra con el prefijo "set" más el nombre de la variable que queremos modificar (setLightSaber).

La función useState representa el valor inicial del estado del componente, en este ejemplo se inicia como un string vacío ("").

⚠NOTA:⚠ La forma correcta de modificar el estado de un componente es usando la función del state (setLightSaber("jedi")) y no por asignación directa (lightSaber = "jedi").

Ahora para dejar en claro el cambio de estados en React veamos este ejemplo completo con el sable de luz donde el estado por defecto es "off" donde el sable está apagado, "jedi" toma el color azul y "sith" toma el carmesí. 😁

import React from 'react'
import { useState } from 'react'
import './lightsaber.css'

const forceUser  = ( ) => {

   const [lightSaber, setLightSaber] = useState("off")

   const offSaber = ( ) => {
      setLightSaber("off")
   }

   const jediSaber = ( ) => {
      setLightSaber("jedi")
   }

   const sithSaber = ( ) => {
      setLightSaber("sith")
   }

   return (
      <>
         <div className={lightSaber}></div>

         <button onClick={offSaber}>Off</button>
         <button onClick={jediSaber}>Jedi</button>
         <button onClick={sithSaber}>Sith</button>
      </>
   )

}

export default forceUser

En este caso se cambia por estados los estilos del sable de luz.

⚠NOTA⚠: Utilizar la función del estado directamente creará un loop infinito de renderización. Para este caso se usó otra función que llama a la función del state para poder realizar el cambio en este ejemplo.

Resultado: