Zustand, loading y estado de escena: cómo evitar una maraña entre React, GSAP y R3F
Aprende a separar estado de carga, estado de interfaz y estado de escena con Zustand para que una experiencia 3D compleja siga siendo mantenible. La meta no es añadir otro store por moda, sino evitar dependencias circulares y entradas con flicker.
Una de las formas más rápidas de romper una experiencia 3D compleja es mezclar sin criterio el estado de React, los refs de Three.js y las animaciones imperativas. El resultado típico: loaders que parpadean, transiciones que arrancan antes de tiempo y componentes que conocen demasiado de todo.
Zustand no arregla mágicamente la arquitectura, pero ayuda mucho a separar responsabilidades. Puedes usarlo para guardar si los assets están listos, qué capítulo de la landing está activo o si el modo móvil ha simplificado la escena, sin arrastrar todo eso por props o estados locales mal repartidos.
La idea central de esta lección es que el estado de carga, el estado de UI y el estado de escena no son lo mismo. Si los mezclas, el código se vuelve frágil. Si los separas, la animación y el render se vuelven mucho más predecibles.
Cuando termines deberías poder diseñar un flujo de loading y entrada sin flicker y con una fuente de verdad clara para lo que la escena necesita saber.
- Separar capas evita mucho caos posterior.
- El estado de carga responde a una pregunta: ¿está listo lo necesario para entrar? El estado de UI responde a otra: ¿qué sección, panel o modo está activo? Y el estado de escena se ocupa de cosas como preset de cámara, intensidad global o capa visual actual.
- Tratar estas tres capas como si fueran lo mismo suele llevar a transiciones inconsistentes y componentes demasiado acoplados.
- No hace falta sobrediseñar para obtener orden.
- Una store simple puede centralizar si el modelo terminó de cargar, qué sección está activa y si la escena debe entrar ya o esperar. Lo importante es que la store no reemplace el resto del diseño; simplemente aclara quién sabe qué.
No todo el estado merece vivir en el mismo sitio
Separar capas evita mucho caos posterior.
El estado de carga responde a una pregunta: ¿está listo lo necesario para entrar? El estado de UI responde a otra: ¿qué sección, panel o modo está activo? Y el estado de escena se ocupa de cosas como preset de cámara, intensidad global o capa visual actual.
Tratar estas tres capas como si fueran lo mismo suele llevar a transiciones inconsistentes y componentes demasiado acoplados.
Zustand como fuente de verdad pequeña y directa
No hace falta sobrediseñar para obtener orden.
Una store simple puede centralizar si el modelo terminó de cargar, qué sección está activa y si la escena debe entrar ya o esperar. Lo importante es que la store no reemplace el resto del diseño; simplemente aclara quién sabe qué.
En escenas con GSAP, esto ayuda mucho porque tus timelines pueden leer un estado ya resuelto en vez de depender de cadenas de callbacks frágiles.
Loading sin flicker: entra cuando haya contexto suficiente
Un preload no debería competir con la propia escena.
No todo tiene que bloquear el arranque. A veces basta con esperar a los assets críticos del hero y diferir lo secundario. El objetivo es no disparar la secuencia antes de que el producto principal y la cámara estén listos.
Una entrada limpia suele combinar: preload mínimo, store con `assetsReady`, una transición breve y un timeline que arranca solo cuando la escena ya existe de verdad.
El contrato entre React, GSAP y la store
Cada capa necesita un trabajo claro.
React compone componentes. Zustand expone estado compartido y legible. GSAP anima refs o valores concretos. Cuando una de estas capas invade demasiado el terreno de otra, aparecen los fallos difíciles de aislar.
Una regla útil es esta: no uses el store para cada frame, y no uses GSAP para decidir lógica de negocio. Cada herramienta gana cuando se limita a su función.
Debug común: todo funciona, pero nadie sabe por qué
Ese es el síntoma típico de arquitectura frágil.
Si el hero entra a veces sí y a veces no, revisa si el estado de carga está definido de forma inequívoca. Si la escena cambia al scroll pero la UI no acompaña, revisa si el capítulo activo vive en una fuente de verdad accesible.
Cuando una experiencia se vuelve difícil de explicar, suele ser porque su arquitectura también lo es.
