Estado y eventos con useState

Una variable normal puede guardar un valor, pero asignarle otro valor no pide a React que actualice la pantalla. El estado es la memoria de un componente. useState devuelve el valor del render actual y una función para solicitar su actualización.

1import { useState } from 'react';
2
3export default function Ejem_07() {
4  const [numerito, setNumerito] = useState(100);
5
6  function handleClick() {
7    setNumerito((prev) => prev + 1);
8    console.log('Valor en este render:', numerito);
9  }
10
11  return <button onClick={handleClick}>{numerito}</button>;
12}

numerito empieza en 100. Al pulsar el botón, React llama a handleClick. La función setNumerito solicita el nuevo valor y React renderiza de nuevo. El botón muestra 101, después 102, y así sucesivamente.

La actualización no cambia la variable actual #

El valor de numerito dentro del manejador pertenece al render que creó ese manejador. Por eso el primer console.log muestra 100, aunque el siguiente render muestre 101. Un setter no cambia inmediatamente esa variable local.

La forma setNumerito((prev) => prev + 1) calcula el nuevo estado a partir del anterior. Más adelante veremos por qué resulta especialmente útil al acumular varias actualizaciones.

Pasar el manejador #

onClick={handleClick} pasa la función. onClick={handleClick()} la ejecutaría durante el render, lo que puede provocar actualizaciones repetidas. También puedes pasar una flecha: onClick={() => setNumerito((prev) => prev + 1)}.

Usamos un botón porque ya admite interacción por ratón y teclado. Un div con onClick necesita trabajo adicional para ofrecer una interacción accesible equivalente.

Los Hooks se llaman en el nivel superior del componente, antes de retornos condicionales, nunca dentro de un if, un bucle o el manejador de un evento.

Prueba tú #

Añade un botón que vuelva a 100. Renderiza dos contadores y comprueba que cada aparición conserva su propio estado.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.