Agregar interactividad

Algunos elementos en la pantalla se actualizan en respuesta a la entrada del usuario. Por ejemplo, hacer clic en una galería de imágenes cambia la imagen activa. En React, los datos que cambian con el tiempo se denominanestado.Puedes agregar estado a cualquier componente y actualizarlo según sea necesario. En este capítulo, aprenderás a escribir componentes que manejen interacciones, actualicen su estado y muestren diferentes resultados a lo largo del tiempo.

Responder a eventos

React te permite agregarmanejadores de eventosa tu JSX. Los manejadores de eventos son tus propias funciones que se activarán en respuesta a interacciones del usuario como hacer clic, pasar el cursor, enfocar entradas de formulario, etc.

Los componentes integrados como<button>solo admiten eventos del navegador integrados comoonClick. Sin embargo, también puedes crear tus propios componentes y dar a sus propiedades de manejador de eventos cualquier nombre específico de la aplicación que desees.

Estado: la memoria de un componente

Los componentes a menudo necesitan cambiar lo que se muestra en la pantalla como resultado de una interacción. Escribir en un formulario debe actualizar el campo de entrada, hacer clic en "siguiente" en un carrusel de imágenes debe cambiar la imagen que se muestra, hacer clic en "comprar" agrega un producto al 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 llamaestado.

Puedes agregar estado a un componente con un HookuseState. LosHooksson funciones especiales que permiten a tus componentes usar características de React (el estado es una de esas características). El HookuseStatete permite declarar una variable de estado. Toma el estado inicial y devuelve un par de valores: el estado actual y una función establecedora de estado que te permite actualizarlo.

Aquí se muestra cómo 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 pantalla, deben ser renderizados por React. Entender 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, preparando platos deliciosos a partir de ingredientes. En este escenario, React es el camarero que toma los pedidos de los clientes y les lleva sus órdenes. Este proceso de solicitar y servir la interfaz de usuario tiene tres pasos:

1. Provocarun renderizado (entregar el pedido del comensal a la cocina)
2. Renderizarel componente (preparar el pedido en la cocina)
3. Confirmaren el DOM (colocar el pedido en la mesa)

1. Provocar
2. Renderizar
3. Confirmar

Ilustrado porRachel Lee Nabors

El estado como una instantánea

A diferencia de las variables de JavaScript normales, el estado de React se comporta más como una instantánea. Establecerlo no cambia la variable de estado que ya tienes, sino que desencadena un 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 yluegocambias el destinatario a Bob. ¿Qué nombre aparecerá en laalertcinco segundos después?

Encolar una serie de actualizaciones de estado

Este componente tiene un error: hacer clic en "+3" incrementa la puntuación solo una vez.

El estado como una instantáneaexplica por qué sucede esto. Establecer el estado solicita un nuevo renderizado, pero no lo cambia en el código que ya se está ejecutando. Por lo tanto,scorecontinúa siendo0justo después de llamar asetScore(score + 1).

Puedes solucionar esto pasando unafunción de actualizaciónal establecer el estado. Observa cómo reemplazarsetScore(score + 1)consetScore(s => s + 1)corrige el botón "+3". Esto te permite encolar múltiples actualizaciones de estado.

Actualizar objetos en el estado

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

Normalmente, usarás la sintaxis de propagación...para copiar objetos y arrays que quieras cambiar. Por ejemplo, actualizar un objeto anidado podría verse así:

Si copiar objetos en el código resulta tedioso, puedes usar una biblioteca comoImmerpara reducir el código repetitivo:

Actualizar arrays en el estado

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

Si copiar arrays en el código resulta tedioso, puedes usar una biblioteca comoImmerpara reducir el código repetitivo:

¿Qué sigue?

Dirígete aResponder a eventospara empezar a leer este capítulo página por página.

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