Zustand: estado global simple, directo y escalable

Aprende a crear un store global con Zustand para compartir estado entre componentes sin boilerplate excesivo.

Cuando Context API empieza a crecer con demasiada lógica y providers, una librería de estado global ligera puede simplificar mucho la arquitectura.

Zustand ofrece un modelo minimalista: defines store con estado y acciones, y cada componente consume solo lo que necesita.

Su principal ventaja práctica es reducir boilerplate frente a soluciones más pesadas manteniendo buen rendimiento.

También permite escalar gradualmente: puedes empezar pequeño y añadir middleware o persistencia cuando el producto lo requiera.

  • Define estado + acciones en una sola función con `create`.
  • Cada acción modifica estado vía `set`, manteniendo la lógica centralizada.
  • Los componentes usan el hook del store para leer y actuar sin pasar props.
  • Esto reduce fricción cuando múltiples vistas dependen del mismo dato global.
  • Mismo estado compartido entre componentes distintos.

Patrón base de store

Define estado + acciones en una sola función con `create`.

Cada acción modifica estado vía `set`, manteniendo la lógica centralizada.

Los componentes usan el hook del store para leer y actuar sin pasar props.

Esto reduce fricción cuando múltiples vistas dependen del mismo dato global.

Ejemplo de contador global

Mismo estado compartido entre componentes distintos.

Buenas prácticas iniciales

No metas todo en un único store gigante desde el primer día.

  • Agrupa estado por dominio (auth, cart, ui).
  • Usa selectores para evitar renders innecesarios.
  • Mantén acciones con nombres de negocio.
  • Evita lógica de red compleja dentro del componente.
React
18

Zustand: estado global simple, directo y escalable

Aprende a crear un store global con Zustand para compartir estado entre componentes sin boilerplate excesivo.

Código del tema: Componentes, estado y render declarativo

📘 Teoría

Patrón base de store

Define estado + acciones en una sola función con `create`.

1

Cada acción modifica estado vía `set`, manteniendo la lógica centralizada.

2

Los componentes usan el hook del store para leer y actuar sin pasar props.

3

Esto reduce fricción cuando múltiples vistas dependen del mismo dato global.

Ejemplo de contador global

Mismo estado compartido entre componentes distintos.

Buenas prácticas iniciales

No metas todo en un único store gigante desde el primer día.

  • Agrupa estado por dominio (auth, cart, ui).
  • Usa selectores para evitar renders innecesarios.
  • Mantén acciones con nombres de negocio.
  • Evita lógica de red compleja dentro del componente.

🧪 Aprende probando

Ejemplo Ejemplo: tema global con Zustand Alternar tema sin Context API ni prop drilling.

🏁 Retos

Reto Reto: añade acción reset Amplía el store del contador con una acción para volver a cero.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre React.

Test de React

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com