Guías Técnicas

Domina el Hook useState en React: Guía Completa y Fácil

  Introducción a los Hooks

Los Hooks son funciones especiales que te permiten “engancharte” a características de React desde componentes funcionales. Fueron introducidos en React 16.8 para permitir usar estado y otras características de React sin escribir componentes de clase.

Hook de Estado (useState)

El Hook de Estado (useState) es una función de React que te permite agregar estado local a los componentes funcionales. Antes de la introducción de los hooks en React 16.8, solo los componentes de clase podían tener estado. useState hace que sea fácil manejar y actualizar el estado dentro de los componentes funcionales.

Sintaxis Básica

jsx 
import { useState } from 'react';

function ComponenteConEstado() {
  const [estado, setEstado] = useState(valorInicial);
}
  Nota

  • estado: El valor actual del estado.
  • setEstado: Una función que se usa para actualizar el valor de estado.
  • valorInicial: El valor con el que se inicializa el estado.

toggle (encendido/apagado) usando el hook useState

jsx 
import React, { useState } from 'react';

function Interruptor() {
  // Estado inicial: apagado (false)
  const [encendido, setEncendido] = useState(false);

  // Función para cambiar el estado
  const manejarClick = () => {
    setEncendido(!encendido);
  };

  return (
    <div>
      <p>El interruptor está {encendido ? 'Encendido' : 'Apagado'}</p>
      <button onClick={manejarClick}>
        {encendido ? 'Apagar' : 'Encender'}
      </button>
    </div>
  );
}

export default Interruptor;
  Explicación

  • Estado encendido: Guarda si el interruptor está encendido o apagado.
  • setEncendido: Cambia el valor de encendido al hacer clic en el botón.
  • Condicional en el renderizado: El texto y el botón cambian según el estado de encendido (ya sea “Encendido” o “Apagado”).

Capturar el valor seleccionado de una lista select usando el hook useState

jsx 
import React, { useState } from 'react';

function Seleccionador() {
  // Estado para almacenar el valor seleccionado
  const [seleccion, setSeleccion] = useState('');

  // Función que se ejecuta cuando el valor cambia
  const manejarCambio = (evento) => {
    setSeleccion(evento.target.value);
  };

  return (
    <div>
      <label htmlFor="opciones">Elige una opción:</label>
      <select id="opciones" value={seleccion} onChange={manejarCambio}>
        <option value="">--Seleccione--</option>
        <option value="opcion1">Opción 1</option>
        <option value="opcion2">Opción 2</option>
        <option value="opcion3">Opción 3</option>
      </select>
      <p>Has seleccionado: {seleccion}</p>
    </div>
  );
}

export default Seleccionador;
  Explicación

  • seleccion: Estado que almacena el valor actualmente seleccionado de la lista select.
  • setSeleccion: Función que actualiza el estado cuando el usuario cambia la opción en el select.
  • onChange: Event handler que se ejecuta cada vez que el usuario selecciona una nueva opción. Captura el valor con evento.target.value y lo actualiza en el estado.

Toggle con Estado

Este ejemplo usa el hook useState para alternar la visibilidad de un contenido. El estado isVisible determina si se muestra un texto dentro de un <div>. El botón cambia su texto entre “Mostrar” y “Ocultar” y, al hacer clic, cambia el valor de isVisible para mostrar u ocultar el contenido.

jsx 
function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Ocultar' : 'Mostrar'}
      </button>
      
      {isVisible && (
        <div>
          ¡Este contenido se puede mostrar u ocultar!
        </div>
      )}
    </div>
  );
}

Malas y buenas prácticas usando el hook useState en React

1. Actualización de Estado Basada en Estado Anterior

Usar la función de actualización setContador(prevContador => ...) garantiza que obtendrás el valor más reciente del estado, evitando posibles inconsistencias si la actualización es asíncrona.

jsx 
// Incorrecto
setContador(contador + 1);

// Correcto
setContador(prevContador => prevContador + 1);

2. No Actualizar el Estado Directamente

Es importante no modificar directamente el estado. Usar setContador() garantiza que React maneje la actualización correctamente.

jsx 
// Incorrecto
contador = contador + 1;  // Esto no actualizará el estado correctamente

// Correcto
setContador(contador + 1);  // Esto actualizará el estado correctamente

3. Evitar Actualizaciones de Estado en Ciclos o Funciones de Efecto Sin Dependencias

Evitar actualizar el estado en un ciclo o sin un control adecuado de dependencias, ya que puede generar ciclos infinitos y actualizaciones innecesarias.

jsx 
// Incorrecto
useEffect(() => {
    setContador(contador + 1);  // Esto generará un ciclo infinito
});

// Correcto
useEffect(() => {
    setContador(c => c + 1);  // Esto previene el ciclo infinito
}, []);  // Dependencias vacías, se ejecuta solo una vez

4. Usar Funciones de Actualización para Establecer el Estado Basado en Condiciones

Cuando actualices el estado basado en una condición, siempre usa una función de actualización para asegurar que el estado se calcule correctamente.

jsx 
// Incorrecto
if (contador > 5) {
    setContador(contador + 1);  // Esto puede no ser seguro si el contador cambia rápidamente
}

// Correcto
if (contador > 5) {
    setContador(prevContador => prevContador + 1);  // Esto asegura que se use el valor más reciente
}

5. No Usar el Estado de Forma Sincronizada con el Renderizado

Recuerda que las actualizaciones de estado no son sincrónicas. No dependas de que el estado se actualice inmediatamente después de llamar a setState().

jsx 
// Incorrecto
setContador(contador + 1);
console.log(contador);  // Esto no mostrará el valor actualizado inmediatamente

// Correcto
setContador(contador + 1);
setTimeout(() => {
  console.log(contador);  // Utiliza un efecto o método para ver el valor actualizado
}, 0);
  Importante

Te invito a visitar nuestra guía paso a paso sobre el Hook useState en ReactJS, donde encontrarás ejemplos claros y prácticos para entender mejor cómo funciona el Hook useEffect y cómo aplicarlo en proyectos reales.