Manejo de estados en React

Los estados en React son variables que se almacenan en memoria para preservar datos entre renderizados. La interactividad es una de las características más importantes de este framework; por ello, cada cambio en el estado activa automáticamente una actualización de la interfaz de usuario.

Los estados son locales y persisten durante el ciclo de vida de cada componente. En React, se utiliza el hook useState y se aplica la desestructuración de arreglos para obtener de forma sencilla tanto el valor del estado como la función para actualizarlo (updater function).

Es importante entender que los estados se inicializan durante el primer renderizado de la interfaz de usuario. Cuando se actualiza el estado mediante su función correspondiente, React captura una snapshot de ese nuevo valor y vuelve a renderizar la pantalla para que la interfaz coincida con el estado actual.

Ejemplo

import { useState } from "react";

export default function counter() {
  // En este caso el valor del estado seria «count» y
  // la función para actualizarlo «setCount»
  const [count, setCount] = useState(0); // Se inicializa en cero

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Me has presionado {count} veces
    </button>
  )
}

Siguiendo este ejemplo, el botón se renderiza inicialmente con el valor cero, mientras que la función y los event handlers se mantienen en memoria. Cuando el usuario hace clic, React genera una snapshot del nuevo estado (que en este caso aumentaría en 1) y, en el siguiente renderizado, actualiza la interfaz de usuario para reflejar ese cambio.

El estado como una Snapshot

Al pasarle count + 1 a la función de actualización, le indicas a React que renderice un valor específico. Es importante notar que, en este ejemplo, no importa que llames al setter tres veces dentro del mismo handler. El valor de count está «congelado» en esa snapshot. Por lo tanto, cada llamada está sumando 1 al mismo valor inicial, y React procesará esto en un solo re-render con el resultado final.

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

// El resultado será (0 + 1) = 1

Actualizaciones con Callbacks

En cambio, al usar un callback dentro de la función de actualización, le pasas una instrucción en lugar de un valor fijo. En este caso, React pone en cola estas funciones y las ejecuta una por una, entregándole a cada una el valor actualizado del paso anterior. Esto permite que, incluso dentro del mismo handler, los cambios se acumulen correctamente.

function handleClick() {
  setCount((count) => count + 1);
  setCount((count) => count + 1);
  setCount((count) => count + 1);
}

// El resultado será (n + 1) = 3