Agregar interactividad

Responder a eventos

React te permite agregar controladores de eventos a tu JSX. Los controladores de eventos son tus propias funciones que se activarán en respuesta a las interacciones del usuario, como hacer clic, pasar el mouse, enfocarse en las entradas de un formulario, etc.

Los componentes integrados como <button> solo admiten eventos de navegador integrados como onClick. Sin embargo, también puedes crear tus propios componentes y darle a sus props de controladores de eventos los nombres específicos de la aplicación que desees.

El estado: la memoria de un componente

Los componentes a menudo necesitan cambiar lo que aparece en la pantalla como resultado de una interacción. Escribir en el formulario debería actualizar el campo de entrada, hacer clic en “siguiente” en un carrusel de imágenes debería cambiar la imagen que se muestra, hacer clic en “comprar” pone un producto en el carrito de compras. Los componentes necesitan “recordar” cosas: el valor de entrada actual, la imagen actual, el carrito de compras. En React, este tipo de memoria específica del componente se llama estado.

Puedes agregar estado a un componente con un Hook. Los Hooks son funciones especiales que permiten que tus componentes usen funciones de React (el estado es una de esas funciones). El Hook useState te permite declarar una variable de estado. Toma el estado inicial y devuelve un par de valores: el estado actual y una función de establecimiento de estado que te permite actualizarlo.

Así es como una galería de imágenes usa y actualiza el estado al hacer clic:

Renderizado y confirmación

Antes de que tus componentes se muestren en la pantalla, deben ser renderizados por React. Comprender los pasos de este proceso te ayudará a pensar en cómo se ejecuta tu código y explicar su comportamiento.

Imagina que tus componentes son cocineros en la cocina, montando sabrosos platos a partir de los ingredientes. En este escenario, React es el camarero que hace las peticiones de los clientes y les trae sus pedidos. Este proceso de solicitud y servicio de UI tiene tres pasos:

1. Desencadenamiento de un renderizado (entrega del pedido del cliente a la cocina)
2. Renderizado del componente (preparación del pedido en la cocina)
3. Confirmación con el DOM (poner el pedido sobre la mesa)

El estado como una instantánea

A diferencia de las variables regulares de JavaScript, el estado de React se comporta más como una instantánea. Establecerlo no cambia la variable de estado que ya tienes, sino que activa una nuevo renderizado. ¡Esto puede ser sorprendente al principio!

Este comportamiento te ayuda a evitar errores sutiles. Aquí hay una pequeña aplicación de chat. Intenta adivinar qué sucede si presionas “Enviar” primero y luego cambias el destinatario a Bob. ¿El nombre de quién aparecerá en la alerta (alert) cinco segundos después?

Poner en cola una serie de actualizaciones de estado

Este componente tiene errores: hacer clic en “+3” incrementa la puntuación solo una vez.

explica por qué sucede esto. Al establecer el estado se solicita un nuevo rerenderizado, pero no lo cambia en el código que ya se está ejecutando. Entonces score sigue siendo 0 justo después de llamar a setScore(score + 1).

Puedes solucionar esto pasando una función de actualización al configurar el estado. Observa cómo reemplazar setScore(score + 1) con setScore(s => s + 1) corrige el botón “+3”. Esto te permite poner en cola múltiples actualizaciones de estado.

Actualizar objetos en el estado

El estado puede contener cualquier tipo de valor de JavaScript, incluidos los objetos. Pero no debes cambiar los objetos y arrays que tienes en el estado de React directamente. En cambio, cuando desees actualizar un objeto y un array, debes crear uno nuevo (o hacer una copia de uno existente) y luego actualizar el estado para usar esa copia.

Por lo general, usarás la sintaxis de propagación ... para copiar objetos y arrays que desees cambiar. Por ejemplo, actualizar un objeto

Si copiar objetos en el código se vuelve tedioso, puedes usar una biblioteca como para reducir el código repetitivo:

Actualizar arrays en el estado

Los arrays son otro tipo de objetos de JavaScript mutables que puedes almacenar en el estado y debes tratar como de solo lectura. Al igual que con los objetos, cuando deseas actualizar un array almacenado en el estado, se debe crear uno nuevo (o hacer una copia de uno existente) y luego configurar el estado para utilizar el nuevo array:

Si copiar arrays en el código se vuelve tedioso, puedes usar una biblioteca como para reducir el código repetitivo:

¿Qué sigue?

Dirígete a para comenzar a leer este capítulo página por página.

O, si ya estás familiarizado con estos temas, ¿por qué no lees sobre ?