Estado: La memoria de un componente

Los componentes a menudo necesitan cambiar lo que se muestra en 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" debe agregar 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.

Cuando una variable regular no es suficiente

Aquí hay un componente que renderiza una imagen de una escultura. Hacer clic en el botón "Siguiente" debería mostrar la siguiente escultura cambiando elindex a 1, luego2, y así sucesivamente. Sin embargo, estono funcionará(¡puedes intentarlo!):

El controlador de eventoshandleClickestá actualizando una variable local,index. Pero dos cosas impiden que ese cambio sea visible:

1. Las variables locales no persisten entre renderizados.Cuando React renderiza este componente por segunda vez, lo renderiza desde cero—no considera ningún cambio en las variables locales.
2. Los cambios en las variables locales no activan renderizados.React no se da cuenta de que necesita renderizar el componente nuevamente con los nuevos datos.

Para actualizar un componente con nuevos datos, deben suceder dos cosas:

1. Retenerlos datos entre renderizados.
2. Provocarque React renderice el componente con nuevos datos (re-renderizado).

El HookuseStateproporciona esas dos cosas:

1. Unavariable de estadopara retener los datos entre renderizados.
2. Unafunción establecedora de estadopara actualizar la variable y provocar que React renderice el componente de nuevo.

Añadir una variable de estado

Para añadir una variable de estado, importauseStatedesde React en la parte superior del archivo:

Luego, reemplaza esta línea:

con

indexes una variable de estado ysetIndexes la función establecedora.

La sintaxis[ y ]aquí se llamadesestructuración de arraysy te permite leer valores de un array. El array devuelto poruseStatesiempre tiene exactamente dos elementos.

Así es como funcionan juntos enhandleClick:

Ahora, hacer clic en el botón "Siguiente" cambia la escultura actual:

Conoce tu primer Hook

En React,useState, así como cualquier otra función que comience con “use”, se llama Hook.

Los Hooksson funciones especiales que solo están disponibles mientras React estárenderizando(lo cual veremos con más detalle en la siguiente página). Te permiten “engancharte” a diferentes características de React.

El estado es solo una de esas características, pero conocerás los otros Hooks más adelante.

Anatomía deuseState

Cuando llamas auseState, le estás diciendo a React que quieres que este componente recuerde algo:

En este caso, quieres que React recuerdeindex.

El único argumento parauseStatees elvalor inicialde tu variable de estado. En este ejemplo, el valor inicial deindexse establece en0conuseState(0).

Cada vez que tu componente se renderiza,useStatete da un array que contiene dos valores:

1. Lavariable de estado(index) con el valor que almacenaste.
2. Lafunción establecedora de estado(setIndex) que puede actualizar la variable de estado y desencadenar que React vuelva a renderizar el componente.

Así es como sucede en acción:

1. Tu componente se renderiza por primera vez.Como pasaste0 a useStatecomo valor inicial paraindex, devolverá[0, setIndex]. React recuerda que0es el último valor de estado.
2. Actualizas el estado.Cuando un usuario hace clic en el botón, llama asetIndex(index + 1).indexes0, así que essetIndex(1). Esto le dice a React que recuerde queindexes1ahora y desencadena otro renderizado.
3. El segundo renderizado de tu componente.React todavía veuseState(0), pero como Reactrecuerdaque establecisteindexen1, devuelve[1, setIndex]en su lugar.
4. ¡Y así sucesivamente!

Dar a un componente múltiples variables de estado

Puedes tener tantas variables de estado de tantos tipos como quieras en un componente. Este componente tiene dos variables de estado, un númeroindexy un booleanoshowMoreque se alterna cuando haces clic en "Mostrar detalles":

Es una buena idea tener múltiples variables de estado si su estado no está relacionado, comoindex y showMoreen este ejemplo. Pero si descubres que a menudo cambias dos variables de estado juntas, podría ser más fácil combinarlas en una. Por ejemplo, si tienes un formulario con muchos campos, es más conveniente tener una única variable de estado que contenga un objeto que una variable de estado por campo. LeeElegir la estructura del estadopara obtener más consejos.

El estado es aislado y privado

El estado es local a una instancia de componente en la pantalla. En otras palabras,si renderizas el mismo componente dos veces, ¡cada copia tendrá un estado completamente aislado!Cambiar uno de ellos no afectará al otro.

En este ejemplo, el componenteGalleryanterior se renderiza dos veces sin cambios en su lógica. Intenta hacer clic en los botones dentro de cada galería. Observa que su estado es independiente:

Esto es lo que diferencia al estado de las variables regulares que podrías declarar en la parte superior de tu módulo. El estado no está vinculado a una llamada de función particular o a un lugar en el código, sino que es "local" al lugar específico en la pantalla. Renderizaste dos componentes<Gallery />, por lo que su estado se almacena por separado.

También observa cómo el componentePageno "sabe" nada sobre el estado deGalleryo incluso si tiene alguno. A diferencia de las props,el estado es completamente privado para el componente que lo declara.El componente padre no puede cambiarlo. Esto te permite agregar estado a cualquier componente o eliminarlo sin afectar al resto de los componentes.

¿Qué pasaría si quisieras que ambas galerías mantuvieran sus estados sincronizados? La forma correcta de hacerlo en React eseliminarel estado de los componentes hijos y agregarlo a su padre compartido más cercano. Las próximas páginas se centrarán en organizar el estado de un solo componente, pero volveremos a este tema enCompartir estado entre componentes.

Recapitulación

• Utiliza una variable de estado cuando un componente necesita "recordar" alguna información entre renderizados.
• Las variables de estado se declaran llamando al HookuseState.
• Los Hooks son funciones especiales que comienzan conuse. Te permiten "engancharte" a características de React como el estado.
• Los Hooks pueden recordarte a las importaciones: deben llamarse incondicionalmente. Llamar a Hooks, incluidouseState, solo es válido en el nivel superior de un componente o de otro Hook.
• El HookuseStatedevuelve un par de valores: el estado actual y la función para actualizarlo.
• Puedes tener más de una variable de estado. Internamente, React las empareja por su orden.
• El estado es privado para el componente. Si lo renderizas en dos lugares, cada copia obtiene su propio estado.