Thread by @matiasfha

Hablemos de "State management" y porqué es "complejo".

¿Que es el estado de una App?

En una versión muy simple estado son datos que cambian en el tiempo y que usamos para definir que se muestra o no al usuario.

Pero: ¿de donde vienen esos datos?

Esta pregunta es quiza la "piedra angular" para un modelo mental sobre el manejo de estado.
No todo el estado es igual ni proviene de las mismas fuentes.
Podemos definir a lo menos 2 categorías de estado
- UI state
- Server State
(shouts @tannerlinsley for this idea)

UI State: el estado que representa aspectos de la interfaz exclusivamente y que es modificado por acciones del usuario por ejemplo ejemplo un modal abierto/cerrado, el valor de un input o un menú.
Es un estado de fácil acceso, efímero y sincrono y es "simple" de manejar

Server state: Es ese estado que "no los pertenece", que es solicitado a un lugar externo, es asíncrono, por lo general no es global y puede estar "desactualizado" como una Cache
"uno de los dos problemas más difíciles en Ciencias de la Computación " 😅

¿Por que diferenciar estos estados?
Por que se manjena de manera diferente.
El estado del servidor es complejo, esta idle, loading/fetching, success or failed, puedes hacer re-fetch o trabajar con datos desactualizados etc.
UI state es simple.

Para manejar el estado de la UI nada mejor que el framework por si mismo. En el caso de @reactjs este ya ofrece las herramientas necesarias para su manejo. De hecho React es un manejador de estado : Composición, Prop drilling y Context son formas de lidiar con el estado de la UI

Server state implica manejar muchas más "variables" externas.
Una recomendación general es hacer "co-locación" del estado e ir subiendo el estado "State lifting" cuando es necesario.
Puedes escribir el código para obtener el estado del servidor y manejarlo adecuadamente?

Claro que puedes!!! 💪🏻💪🏻💪🏻 pero ¿debes?
Creo que no. Tu tarea es implementar la lógica de negocio de tu app particular no manejar todo el boilerplate para manejar todos los casos de uso de obtener estado externo. Pero: y si quieres hacerlo?

En caso de q quieras hacerlo React provee de las herramientas necesarias.
El uso de hooks es todo lo que necesitas. Composición para crear tus propios hooks serán tu herramienta principal.
useState, useReducer y useEffect
matiashernandez.dev/react-useeffec…

Pero creo que es mejor dejar esta tarea a una librería que se encargue de buena manera como React-query react-query.tanstack.com/overview que entregará todo lo necesario para lidiar con el estado del servidor

Lo que nos deja nuevamente manejando el estado de la UI que puede derivar del estado obtenido del servidor o crearse con eventos.
Como manejarlo? Puedes usar cualquier librería como Redux...aunque no lo necesitas
matiashernandez.dev/no-necesitas-r…

Quieres saber más sobre utilizar hooks y crear usos y composición "avanzada" mira este curso en @eggheadio egghead.io/courses/hooks-…

También puedes unirte a MicroBytes el newsletter de microcursos al que prontamente se agregará un curso de fundamentos de React
microbytes.matiashernandez.dev

Y tu como manejas el estado de tus aplicaciones?