{"id":31489,"date":"2025-01-27T11:20:11","date_gmt":"2025-01-27T10:20:11","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=31489"},"modified":"2025-09-12T12:42:19","modified_gmt":"2025-09-12T10:42:19","slug":"zustand-todo-lo-que-debes-saber-para-dominarlo","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/","title":{"rendered":"Zustand: Todo lo que debes saber para dominarlo"},"content":{"rendered":"\n<p>Imagina tener un solo lugar donde guardar toda la informaci\u00f3n que tu aplicaci\u00f3n necesita para funcionar. <a href=\"https:\/\/www.urianviera.com\/reactjs\/guia-completa-para-dominar-zustand-en-react\" target=\"_blank\" rel=\"noreferrer noopener\">Zustand<\/a> es como ese caj\u00f3n m\u00e1gico, pero para el desarrollo frontend. Asimismo, en el mundo del desarrollo de aplicaciones con React, la gesti\u00f3n del estado global es un componente esencial, pero a menudo complejo.&nbsp;En este art\u00edculo, vamos a explorar Zustand y todo lo que debemos saber para dominarlo de forma eficiente.<\/p>\n\n\n\n<p>Aqu\u00ed es donde entra en juego Zustand, una librer\u00eda de gesti\u00f3n de estado simple, escalable, elegante y minimalista para el manejo del estado en React, que te permite crear y actualizar datos de manera eficiente y predecible. En otras palabras, Zustand se presenta como una soluci\u00f3n ligera y eficaz para el manejo del estado en aplicaciones <a href=\"https:\/\/www.codemotion.com\/magazine\/es\/lenguajes-de-programacion\/una-completa-introduccion-a-la-libreria-react\/\">React<\/a>, ideal para aquellos que buscan simplicidad sin sacrificar la funcionalidad.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"h-que-es-nbsp-zustand\"><strong>\u00bfQu\u00e9 es&nbsp;Zustand?<\/strong><\/h2>\n\n\n\n<p>Zustand fue creada con la filosof\u00eda de mantener las cosas simples y eficientes. A diferencia de otras soluciones de manejo de estado m\u00e1s robustas (y a veces m\u00e1s complejas) como Redux, Zustand ofrece una API sencilla y directa, facilitando la creaci\u00f3n y gesti\u00f3n de estados globales, sin la necesidad de envolver componentes en proveedores de contexto o lidiar con una configuraci\u00f3n extensa.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*oC_dQlEnASuYk8b3iqDXgA.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">alt=\u201d<a href=\"https:\/\/tse4.mm.bing.net\/th?id=OIG3.CLllE_nVQbi9Ouvkr4kI&amp;pid=ImgGn\" target=\"_blank\" rel=\"noreferrer noopener\">Gesti\u00f3n de estado en React<\/a>\u201d<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"h-cuando-usar-nbsp-zustand\"><strong>\u00bfCu\u00e1ndo usar&nbsp;Zustand?<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gestionar el estado global de aplicaciones React.<\/li>\n\n\n\n<li>Crear aplicaciones de una sola p\u00e1gina (SPA).<\/li>\n\n\n\n<li>Manejar datos complejos y cambiantes.<\/li>\n\n\n\n<li>Optimizar el rendimiento de tu aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"h-ventajas-de-usar-nbsp-zustand\"><strong><strong>Ventajas de usar&nbsp;Zustand<\/strong><\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplicidad y <strong>Flexibilidad<\/strong>:<\/strong> Zustand te ofrece una API intuitiva y f\u00e1cil de aprender, sin necesidad de sumergirte en conceptos complejos. Tambi\u00e9n, se adapta a proyectos de cualquier tama\u00f1o, desde peque\u00f1as aplicaciones hasta grandes sistemas.<\/li>\n\n\n\n<li><strong>Comunidad:<\/strong> Cuenta con una comunidad activa y en constante crecimiento, lo que significa que siempre encontrar\u00e1s ayuda cuando la necesites.<\/li>\n\n\n\n<li><strong>Sencillez y minimalismo:<\/strong> Zustand tiene un enfoque minimalista, ya que tiene una API muy sencilla y f\u00e1cil de entender, es decir, es m\u00e1s intuitiva y menos verbosa. Esto facilita el aprendizaje y la implementaci\u00f3n, incluso para aquellos que son nuevos en el manejo del estado en React.<\/li>\n\n\n\n<li><strong>Basado en Hooks:<\/strong> Utiliza hooks de React, como <code>useStore<\/code>, para acceder y manipular el estado. Esto va en la l\u00ednea de los patrones modernos de desarrollo en React y permite una integraci\u00f3n fluida con componentes funcionales.<\/li>\n\n\n\n<li><strong>Configuraci\u00f3n ligera:<\/strong> A diferencia de otras soluciones de manejo de estado que requieren una configuraci\u00f3n m\u00e1s elaborada, Zustand permite configurar el estado global de una manera mucho m\u00e1s directa y sin la necesidad de envolver toda la aplicaci\u00f3n en proveedores de contexto. Adem\u00e1s, Zustand tiene una huella menor que otras librer\u00edas como Redux y te permite personalizar la gesti\u00f3n de estado seg\u00fan tus necesidades.<\/li>\n\n\n\n<li><strong>Estado mutable e inmutable:<\/strong> Aunque suene contradictorio, Zustand combina lo mejor de ambos mundos. Usa inmutabilidad bajo el cap\u00f3 para prevenir efectos secundarios no deseados, pero expone una API mutable, que es m\u00e1s intuitiva, para realizar actualizaciones de estado.<\/li>\n\n\n\n<li><strong>No impone arquitectura:<\/strong> Zustand no obliga a los desarrolladores a seguir una arquitectura espec\u00edfica, permitiendo mayor flexibilidad a la hora de estructurar y manejar el estado en aplicaciones de diferentes escalas y complejidades.<\/li>\n\n\n\n<li><strong>Rendimiento \u00f3ptimo:<\/strong> Al utilizar hooks y enfocarse en la simplicidad, Zustand ayuda a mantener un alto rendimiento en aplicaciones <a href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/como-funciona-el-renderizado-en-react\/\">React<\/a>, evitando renderizados innecesarios y sobrecarga de memoria; en otras palabras, optimizado para un rendimiento m\u00e1ximo, Zustand garantiza una experiencia de usuario fluida.<\/li>\n\n\n\n<li><strong>F\u00e1cil integraci\u00f3n con Middleware:<\/strong> Permite la integraci\u00f3n con middleware y otras herramientas de desarrollo, como Redux DevTools, lo que facilita la depuraci\u00f3n y el seguimiento del estado de la aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conceptos-basicos-de-nbsp-zustand\"><strong>Conceptos B\u00e1sicos de&nbsp;Zustand<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store:<\/strong> Es el lugar donde se almacena el estado global.<\/li>\n\n\n\n<li><strong>Atoms:<\/strong> Los \u00e1tomos son las unidades b\u00e1sicas de estado en Zustand. Cada \u00e1tomo representa una pieza de datos independiente.<\/li>\n\n\n\n<li><strong>Selector:<\/strong> Permite obtener partes espec\u00edficas del estado global, optimizando re-renderizados, es decir, los selectores te permiten extraer datos de la store de forma eficiente y crear c\u00e1lculos derivados.<\/li>\n\n\n\n<li><strong>Middleware:<\/strong> Extiende funcionalidades, como persistencia en <code>localStorage<\/code> o logs, adem\u00e1s, los middlewares te permiten agregar l\u00f3gica personalizada a tus updates de estado, como el logging o la persistencia de datos.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-como-funciona-zustand\"><strong>\u00bfC\u00f3mo funciona Zustand?<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.paradigmadigital.com\/dev\/domina-manejo-estados-react-zustand\/\" rel=\"noreferrer noopener\" target=\"_blank\">Zustand<\/a> utiliza el concepto de \u201cstore\u201d (tienda) para almacenar el estado de tu aplicaci\u00f3n. Esta store es un objeto JavaScript simple que contiene tus datos. Cuando los datos cambian, la store se actualiza autom\u00e1ticamente y React redibuja la interfaz de usuario.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-instalacion-de-nbsp-zustand\"><strong>Instalaci\u00f3n de&nbsp;Zustand<\/strong><\/h3>\n\n\n\n<p>Para instalar Zustand, puedes usar npm o yarn:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install zustand<br># o<br>yarn add zustand<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-como-crear-un-nbsp-store-con-zustand\"><strong>C\u00f3mo Crear un&nbsp;Store con Zustand<\/strong><\/h3>\n\n\n\n<p>Para configurar Zustand en tu proyecto, es necesario definir un store. Podemos crear tantos stores como necesitemos, ya que cada uno puede estar dise\u00f1ado para manejar estados espec\u00edficos dentro de nuestra aplicaci\u00f3n.&nbsp;<\/p>\n\n\n\n<p>Por otro lado, es buena pr\u00e1ctica organizar los stores en una carpeta dedicada llamada <code>store<\/code>. Dentro de esta carpeta, crea un archivo como <code>store.jsx<\/code> o <code>store.tsx<\/code>, dependiendo de si usas JavaScript o TypeScript. En Zustand, defines el estado y las acciones en un archivo central. Aqu\u00ed tienes un ejemplo b\u00e1sico:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ store.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> { create } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'zustand'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> useStore = create(<span class=\"hljs-function\">(<span class=\"hljs-params\">set<\/span>) =&gt;<\/span> ({\n  <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-comment\">\/\/ Estado inicial del contador<\/span>\n  <span class=\"hljs-attr\">increment<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-keyword\">set<\/span>((state) =&gt; ({ count: state.count + <span class=\"hljs-number\">1<\/span> })),\n  <span class=\"hljs-attr\">decrement<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-keyword\">set<\/span>((state) =&gt; ({ count: state.count - <span class=\"hljs-number\">1<\/span> })),\n}));\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> useStore;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*KKSHeP53hslawiB_EJMKYg.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">alt=\u201d<a href=\"https:\/\/tse1.mm.bing.net\/th?id=OIG1.TGmzuazH5PWT7YKXxzAL&amp;pid=ImgGn\" target=\"_blank\" rel=\"noreferrer noopener\">Librer\u00eda de estado para React<\/a>\u201d<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ejemplo-de-uso-en-un-componente\"><strong>Ejemplo de Uso en un Componente<\/strong><\/h3>\n\n\n\n<p>Una vez que hayas creado tu store, puedes usarlo en tus componentes de React de la siguiente manera:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> useStore <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/store'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> Counter = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> { count, increment, decrement } = useStore();\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{count}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{increment}<\/span>&gt;<\/span>Incrementar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{decrement}<\/span>&gt;<\/span>Decrementar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Counter;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>En este ejemplo, <code>useStore<\/code> se utiliza para acceder al estado global y las acciones definidas en el store. Los botones permiten incrementar y decrementar el contador, actualizando el estado global de manera eficiente.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"h-conclusion\"><strong>Conclusi\u00f3n<\/strong><\/h2>\n\n\n\n<p>Si buscas una soluci\u00f3n simple, eficiente y escalable, Zustand es definitivamente una opci\u00f3n a considerar. Su simplicidad y eficiencia la convierten en una excelente opci\u00f3n para desarrolladores que buscan una soluci\u00f3n ligera y f\u00e1cil de usar. Con Zustand, puedes manejar estados globales de manera efectiva, sin la necesidad de configuraciones complejas o arquitecturas r\u00edgidas. \u00a1Empieza a usar Zustand hoy y lleva tus aplicaciones React al siguiente nivel!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*70HnqxVLENcnnNKbF5lRoQ.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">alt=<a href=\"https:\/\/tse3.mm.bing.net\/th?id=OIG4.7qzQUF3AVr3KEkiVNwJc&amp;pid=ImgGn\" target=\"_blank\" rel=\"noreferrer noopener\">\u201cManejo de estado con Zustand<\/a>\u201d<\/figcaption><\/figure><\/div>\n\n\n<ul class=\"wp-block-social-links alignright is-layout-flex wp-block-social-links-is-layout-flex\"><li class=\"wp-social-link wp-social-link-linkedin  wp-block-social-link\"><a href=\"https:\/\/www.linkedin.com\/in\/orlibetdungonzalez\/\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">LinkedIn<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-medium  wp-block-social-link\"><a href=\"https:\/\/medium.com\/@orlidev\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13.2,12c0,3-2.4,5.4-5.3,5.4S2.6,15,2.6,12s2.4-5.4,5.3-5.4S13.2,9,13.2,12 M19.1,12c0,2.8-1.2,5-2.7,5s-2.7-2.3-2.7-5s1.2-5,2.7-5C17.9,7,19.1,9.2,19.1,12 M21.4,12c0,2.5-0.4,4.5-0.9,4.5c-0.5,0-0.9-2-0.9-4.5s0.4-4.5,0.9-4.5C21,7.5,21.4,9.5,21.4,12\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Medium<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-chain  wp-block-social-link\"><a href=\"https:\/\/my-million-friend-blog.vercel.app\/\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Link<\/span><\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imagina tener un solo lugar donde guardar toda la informaci\u00f3n que tu aplicaci\u00f3n necesita para funcionar. Zustand es como ese caj\u00f3n m\u00e1gico, pero para el desarrollo frontend. Asimismo, en el mundo del desarrollo de aplicaciones con React, la gesti\u00f3n del estado global es un componente esencial, pero a menudo complejo.&nbsp;En este art\u00edculo, vamos a explorar&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\">Read more<\/a><\/p>\n","protected":false},"author":313,"featured_media":31726,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10632],"tags":[10747],"collections":[12925,12929,13014],"class_list":{"0":"post-31489","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-es","8":"tag-desarrollo-web","9":"collections-frontend","10":"collections-react","11":"collections-zustand","12":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Zustand: Todo lo que debes saber para dominarlo<\/title>\n<meta name=\"description\" content=\"Aprende a dominar Zustand, la librer\u00eda de gesti\u00f3n de estado en React, con esta gu\u00eda completa y ejemplos claros.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zustand: Todo lo que debes saber para dominarlo\" \/>\n<meta property=\"og:description\" content=\"Aprende a dominar Zustand, la librer\u00eda de gesti\u00f3n de estado en React, con esta gu\u00eda completa y ejemplos claros.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-27T10:20:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-12T10:42:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Orli Dun\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Orli Dun\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\"},\"author\":{\"name\":\"Orli Dun\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/37ca255c359cc54110ac89eb4fa7db42\"},\"headline\":\"Zustand: Todo lo que debes saber para dominarlo\",\"datePublished\":\"2025-01-27T10:20:11+00:00\",\"dateModified\":\"2025-09-12T10:42:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\"},\"wordCount\":1034,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg\",\"keywords\":[\"Desarrollo web\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\",\"name\":\"Zustand: Todo lo que debes saber para dominarlo\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg\",\"datePublished\":\"2025-01-27T10:20:11+00:00\",\"dateModified\":\"2025-09-12T10:42:19+00:00\",\"description\":\"Aprende a dominar Zustand, la librer\u00eda de gesti\u00f3n de estado en React, con esta gu\u00eda completa y ejemplos claros.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg\",\"width\":800,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zustand: Todo lo que debes saber para dominarlo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/37ca255c359cc54110ac89eb4fa7db42\",\"name\":\"Orli Dun\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/04\/alura-profile-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/04\/alura-profile-100x100.png\",\"caption\":\"Orli Dun\"},\"description\":\"From finance to the digital revolution! Systems Engineer | Cloud &amp; AI | Tech Creator | Community Manager at Alura Latam #foramillionfriends\",\"sameAs\":[\"https:\/\/orlidun.vercel.app\/\",\"https:\/\/www.linkedin.com\/in\/orlibetdungonzalez\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/orli-dun\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zustand: Todo lo que debes saber para dominarlo","description":"Aprende a dominar Zustand, la librer\u00eda de gesti\u00f3n de estado en React, con esta gu\u00eda completa y ejemplos claros.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/","og_locale":"en_US","og_type":"article","og_title":"Zustand: Todo lo que debes saber para dominarlo","og_description":"Aprende a dominar Zustand, la librer\u00eda de gesti\u00f3n de estado en React, con esta gu\u00eda completa y ejemplos claros.","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-01-27T10:20:11+00:00","article_modified_time":"2025-09-12T10:42:19+00:00","og_image":[{"width":800,"height":800,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg","type":"image\/jpeg"}],"author":"Orli Dun","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Orli Dun","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/"},"author":{"name":"Orli Dun","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/37ca255c359cc54110ac89eb4fa7db42"},"headline":"Zustand: Todo lo que debes saber para dominarlo","datePublished":"2025-01-27T10:20:11+00:00","dateModified":"2025-09-12T10:42:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/"},"wordCount":1034,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg","keywords":["Desarrollo web"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/","name":"Zustand: Todo lo que debes saber para dominarlo","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg","datePublished":"2025-01-27T10:20:11+00:00","dateModified":"2025-09-12T10:42:19+00:00","description":"Aprende a dominar Zustand, la librer\u00eda de gesti\u00f3n de estado en React, con esta gu\u00eda completa y ejemplos claros.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg","width":800,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/zustand-todo-lo-que-debes-saber-para-dominarlo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/"},{"@type":"ListItem","position":3,"name":"Zustand: Todo lo que debes saber para dominarlo"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/37ca255c359cc54110ac89eb4fa7db42","name":"Orli Dun","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/04\/alura-profile-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/04\/alura-profile-100x100.png","caption":"Orli Dun"},"description":"From finance to the digital revolution! Systems Engineer | Cloud &amp; AI | Tech Creator | Community Manager at Alura Latam #foramillionfriends","sameAs":["https:\/\/orlidun.vercel.app\/","https:\/\/www.linkedin.com\/in\/orlibetdungonzalez"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/orli-dun\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-600x600.jpg","author_info":{"display_name":"Orli Dun","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/orli-dun\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg",800,800,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-300x300.jpg",300,300,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-768x768.jpg",768,768,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg",800,800,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg",800,800,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA.jpg",800,800,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-100x100.jpg",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-800x504.jpg",800,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/1_T8-zn0Ybt3ZCzBjHTnx8lA-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Orli Dun","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/orli-dun\/"},"uagb_comment_info":0,"uagb_excerpt":"Imagina tener un solo lugar donde guardar toda la informaci\u00f3n que tu aplicaci\u00f3n necesita para funcionar. Zustand es como ese caj\u00f3n m\u00e1gico, pero para el desarrollo frontend. Asimismo, en el mundo del desarrollo de aplicaciones con React, la gesti\u00f3n del estado global es un componente esencial, pero a menudo complejo.&nbsp;En este art\u00edculo, vamos a explorar&#8230;&hellip;","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/31489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=31489"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/31489\/revisions"}],"predecessor-version":[{"id":31728,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/31489\/revisions\/31728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/31726"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=31489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=31489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=31489"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=31489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}