Depurador de Gestion de Estado

El Problema

Los bugs de estado en la UI son especialmente frustrantes — el componente renderiza, pero con datos viejos. Un click handler usa una closure obsoleta, un valor derivado esta desincronizado, un re-render del padre resetea el estado del hijo. React DevTools muestra que el estado se ve bien, pero el componente se comporta como si viviera en el pasado. Estos bugs nacen de la brecha entre como los desarrolladores piensan que funciona el estado y como el sistema de reactividad realmente programa las actualizaciones.

El Prompt

Eres un especialista en depuracion de estado de UI. Diagnostica este bug de gestion de estado:

FRAMEWORK: [React/Vue/Svelte + version]
LIBRERIA DE ESTADO: [useState/useReducer/Redux/Zustand/Pinia/Vuex/signals — o ninguna]
SINTOMA: [ej. "muestra datos obsoletos despues de actualizar", "componente re-renderiza 50 veces", "estado se resetea al navegar"]

CODIGO DEL COMPONENTE:
[pega el componente con logica de estado, effects y event handlers]

Diagnostica el problema de estado:
1. **Mapa de Flujo de Estado**: Rastrea cada variable de estado desde declaracion → mutacion → consumo.
2. **Analisis de Triggers de Render**: Que causa que este componente re-renderice? Lista cada trigger.
3. **Auditoria de Closures**: Para cada callback y effect, lista que variables de estado captura. Alguna esta obsoleta al momento de ejecutarse?
4. **Batching de Updates**: Se agrupan las multiples llamadas a setState o son secuenciales? Importa el orden?
5. **Check de Estado Derivado**: Se esta almacenando estado derivado de otro estado en vez de computarlo? Esta es la fuente #1 de bugs de sincronizacion de estado.
6. **El Fix**: Proporciona el enfoque corregido con explicacion del principio de reactividad que se violo.

Ejemplo de Salida

Flujo de estado: count (useState) → mostrado en <span> Y capturado por callback de setInterval
Bug de closure: El callback de setInterval captura count=0 al montarse. Cada tick lee el valor inicial obsoleto.
Fix Opcion A: Usar updater funcional: setCount(prev => prev + 1) — no depende del valor del closure
Fix Opcion B: Usar useRef para mantener el count actual, actualizar ref en useEffect, leer ref.current en interval
Recomendado: Opcion A — mas simple, sin refs extra, siempre correcto

Cuando Usar

Usa este skill cuando componentes de UI muestran datos obsoletos, cuando actualizaciones de estado no se reflejan en la UI, cuando componentes re-renderizan excesivamente, o cuando la sincronizacion de estado entre padre e hijo se rompe.

Tips Pro

• Usa el Profiler de React DevTools — muestra exactamente por que cada componente re-renderizo. Acota la investigacion inmediatamente.
• La closure obsoleta SIEMPRE es la respuesta en React — si un callback tiene el valor incorrecto, capturo estado al momento de creacion. Usa updaters funcionales o refs.
• Estado derivado debe computarse, no almacenarse — si el estado B siempre es funcion del estado A, no lo guardes en useState. Computalo durante el render.
• Las actualizaciones de estado son asincronas — leer estado inmediatamente despues de setearlo retorna el valor VIEJO.