Gestión del estado

A medida que tu aplicación crece, es útil ser más intencional sobre cómo se organiza tu estado y cómo fluyen los datos entre tus componentes. El estado redundante o duplicado es una fuente común de errores. En este capítulo, aprenderás cómo estructurar bien tu estado, cómo mantener la lógica de actualización del estado mantenible y cómo compartir estado entre componentes distantes.

Reaccionar a la entrada con estado

Con React, no modificarás la interfaz de usuario directamente desde el código. Por ejemplo, no escribirás comandos como "deshabilitar el botón", "habilitar el botón", "mostrar el mensaje de éxito", etc. En su lugar, describirás la interfaz de usuario que quieres ver para los diferentes estados visuales de tu componente ("estado inicial", "estado de escritura", "estado de éxito"), y luego activarás los cambios de estado en respuesta a la entrada del usuario. Esto es similar a cómo piensan los diseñadores sobre la interfaz de usuario.

Aquí hay un formulario de cuestionario construido usando React. Observa cómo utiliza la variable de estadostatuspara determinar si habilitar o deshabilitar el botón de enviar, y si mostrar el mensaje de éxito en su lugar.

Elegir la estructura del estado

Estructurar bien el estado puede marcar la diferencia entre un componente que es agradable de modificar y depurar, y uno que es una fuente constante de errores. El principio más importante es que el estado no debe contener información redundante o duplicada. Si hay estado innecesario, es fácil olvidarse de actualizarlo e introducir errores.

Por ejemplo, este formulario tiene una variable de estadoredundantefullName:

Puedes eliminarla y simplificar el código calculandofullNamemientras se renderiza el componente:

Esto puede parecer un cambio pequeño, pero muchos errores en las aplicaciones de React se solucionan de esta manera.

Compartir estado entre componentes

A veces, quieres que el estado de dos componentes cambie siempre juntos. Para hacerlo, elimina el estado de ambos, muévelo a su ancestro común más cercano y luego pásalo hacia abajo mediante props. Esto se conoce como "elevar el estado" y es una de las cosas más comunes que harás al escribir código en React.

En este ejemplo, solo un panel debe estar activo a la vez. Para lograrlo, en lugar de mantener el estado activo dentro de cada panel individual, el componente padre contiene el estado y especifica las props para sus hijos.

Preservar y restablecer el estado

Cuando vuelves a renderizar un componente, React necesita decidir qué partes del árbol mantener (y actualizar) y cuáles descartar o recrear desde cero. En la mayoría de los casos, el comportamiento automático de React funciona lo suficientemente bien. Por defecto, React preserva las partes del árbol que "coinciden" con el árbol de componentes renderizado previamente.

Sin embargo, a veces esto no es lo que quieres. En esta aplicación de chat, escribir un mensaje y luego cambiar el destinatario no restablece la entrada. Esto puede hacer que el usuario envíe accidentalmente un mensaje a la persona equivocada:

React te permite anular el comportamiento predeterminado yforzara un componente a restablecer su estado pasándole unakeydiferente, como<Chat key={email} />. Esto le indica a React que si el destinatario es diferente, debe considerarse un componentediferenteChatque necesita recrearse desde cero con los nuevos datos (y la interfaz de usuario como las entradas). Ahora, cambiar entre destinatarios restablece el campo de entrada, aunque se renderice el mismo componente.

Extraer la lógica del estado en un reductor

Los componentes con muchas actualizaciones de estado repartidas en muchos manejadores de eventos pueden resultar abrumadores. Para estos casos, puedes consolidar toda la lógica de actualización del estado fuera de tu componente en una sola función, llamada "reductor". Tus manejadores de eventos se vuelven concisos porque solo especifican las "acciones" del usuario. Al final del archivo, la función reductora especifica cómo debe actualizarse el estado en respuesta a cada acción.

Pasar datos en profundidad con contexto

Normalmente, pasarás información de un componente padre a un componente hijo mediante props. Pero pasar props puede volverse inconveniente si necesitas pasar alguna prop a través de muchos componentes, o si muchos componentes necesitan la misma información. El contexto permite al componente padre hacer que cierta información esté disponible para cualquier componente en el árbol debajo de él—sin importar cuán profundo sea—sin pasarla explícitamente a través de props.

Aquí, el componenteHeadingdetermina su nivel de encabezado "preguntando" alSectionmás cercano por su nivel. CadaSectionlleva la cuenta de su propio nivel preguntando alSectionpadre y sumándole uno. CadaSectionproporciona información a todos los componentes debajo de él sin pasar props—lo hace a través del contexto.

Escalar con reducer y contexto

Los reducers te permiten consolidar la lógica de actualización de estado de un componente. El contexto te permite pasar información en profundidad a otros componentes. Puedes combinar reducers y contexto para gestionar el estado de una pantalla compleja.

Con este enfoque, un componente padre con estado complejo lo gestiona con un reducer. Otros componentes en cualquier parte profunda del árbol pueden leer su estado a través del contexto. También pueden despachar acciones para actualizar ese estado.

¿Qué sigue?

Dirígete aReaccionar a la Entrada con Estadopara empezar a leer este capítulo página por página.

O, si ya estás familiarizado con estos temas, ¿por qué no leer sobreSalidas de Emergencia?