{"id":66801,"date":"2023-09-01T11:20:08","date_gmt":"2023-09-01T09:20:08","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=66801&#038;post_type=knowledgebase&#038;preview_id=66801"},"modified":"2025-10-01T21:29:16","modified_gmt":"2025-10-01T19:29:16","slug":"usestate-react","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/","title":{"rendered":"Primeros Pasos con el Gancho useState en React"},"content":{"rendered":"<p>React es una popular <a href=\"https:\/\/kinqsta.com\/es\/blog\/bibliotecas-javascript\/\">biblioteca JavaScript<\/a> utilizada para construir interfaces de usuario. Proporciona a <a href=\"https:\/\/kinqsta.com\/es\/blog\/tipos-de-desarrolladores\/\">los desarrolladores<\/a> una amplia gama de herramientas, incluidos los Ganchos, para que crear aplicaciones sea m\u00e1s f\u00e1cil y eficiente.<\/p>\n<p>Uno de los ganchos m\u00e1s utilizados es <code>useState<\/code>, que permite a los desarrolladores a\u00f1adir estado a los componentes funcionales.<\/p>\n<p>En este art\u00edculo, repasaremos en profundidad el gancho <code>useState<\/code>, sus usos y las mejores pr\u00e1cticas para su implementaci\u00f3n.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfQu\u00e9 Es el Gancho useState?<\/h2>\n<p>Antes de sumergirnos en los detalles de <code>useState<\/code>, definamos primero qu\u00e9 son los Ganchos y en qu\u00e9 se diferencian de los componentes de clase tradicionales.<\/p>\n<p>Un Gancho es una funci\u00f3n que te permite utilizar el estado y otras caracter\u00edsticas <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-react-js\/\">de React<\/a> en componentes funcionales.<\/p>\n<p>A diferencia de los componentes de clase, los componentes funcionales no tienen una forma integrada de almacenar el estado. Los Ganchos como <code>useState<\/code> resuelven este problema permiti\u00e9ndote a\u00f1adir estado a los componentes funcionales.<\/p>\n\n<h3>El Trasfondo del gancho useState<\/h3>\n<p>Antes de la introducci\u00f3n del gancho <code>useState<\/code> en React 16.8, los componentes funcionales no pod\u00edan mantener su propio estado. En su lugar, los desarrolladores ten\u00edan que utilizar componentes de clase o bibliotecas externas de gesti\u00f3n de estado como Redux para gestionar el estado en sus aplicaciones.<\/p>\n<p>Aunque los componentes de clase y las bibliotecas externas de gesti\u00f3n de estado siguen siendo opciones viables, la introducci\u00f3n del Gancho <code>useState<\/code> facilit\u00f3 mucho a los desarrolladores a\u00f1adir estado a sus componentes funcionales y simplific\u00f3 la <a href=\"https:\/\/kinqsta.com\/es\/blog\/api-rest-vs-api-web\/\">API<\/a> de React en general.<\/p>\n<p>Con el Gancho <code>useState<\/code>, los desarrolladores pueden ahora utilizar componentes funcionales para la mayor\u00eda de los casos de uso, reduciendo la cantidad de c\u00f3digo repetitivo necesario y facilitando la evaluaci\u00f3n del estado en sus aplicaciones.<\/p>\n<h3>Componentes de la sintaxis useState<\/h3>\n<p>El Gancho <code>useState<\/code> toma como argumento un valor de estado inicial y devuelve una matriz que contiene dos elementos: el valor de estado actual y una funci\u00f3n que actualiza el valor de estado.<\/p>\n<p>\u00c9sta es la sintaxis:<\/p>\n<pre><code class=\"language-jsx\">const [state, setState] = useState(initialState);<\/code><\/pre>\n<ul>\n<li><code>state<\/code>: El valor del estado actual.<\/li>\n<li><code>setState<\/code>: Una funci\u00f3n que actualiza el valor de estado.<\/li>\n<li><code>initialState<\/code>: El valor inicial de la variable de estado que se est\u00e1 declarando. Es opcional. Cuando no se proporciona ning\u00fan valor (no es aconsejable), se establece autom\u00e1ticamente en <code>undefined<\/code>.<\/li>\n<\/ul>\n<p>Es importante tener en cuenta que al utilizar el Gancho <code>useState<\/code>, React volver\u00e1 a renderizar autom\u00e1ticamente tu componente cada vez que cambie el valor de estado.<\/p>\n<h2>C\u00f3mo Utilizar el Gancho useState<\/h2>\n<p>Para implementar <code>useState<\/code>, llama a la funci\u00f3n y pasa un valor inicial como argumento. La funci\u00f3n devuelve un array que contiene el valor de estado actual y una funci\u00f3n para actualizar el estado.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de uso de <code>useState<\/code> para gestionar un contador sencillo:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;You clicked {count} times&lt;\/p&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\n        Click me\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default Counter;<\/code><\/pre>\n<p>En este ejemplo, inicializamos el estado <code>count<\/code> a 0 utilizando el Gancho <code>useState<\/code>. A continuaci\u00f3n, mostramos el valor de recuento actual y un bot\u00f3n. Al hacer clic en el bot\u00f3n, el valor del recuento se incrementar\u00e1 porque hemos a\u00f1adido una funci\u00f3n de flecha con la funci\u00f3n <code>setCount<\/code>.<\/p>\n<pre><code class=\"language-jsx\">&lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;\/button&gt;<\/code><\/pre>\n<p>Cuando utilices el Gancho <code>useState<\/code>, es importante que recuerdes importarlo de la biblioteca React. Si te olvidas de importarlo, es probable que te encuentres con errores al intentar utilizar el Gancho. A continuaci\u00f3n te explicamos c\u00f3mo importar useState:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';<\/code><\/pre>\n<p>Al incluir <code>useState<\/code> en la declaraci\u00f3n de importaci\u00f3n, le est\u00e1s diciendo a React que quieres utilizar el Gancho <code>useState<\/code> en tu componente.<\/p>\n<h2>Uso de Distintos Tipos de Datos con el Gancho useState en React<\/h2>\n<p>El Gancho <code>useState<\/code> en React no se limita a gestionar s\u00f3lo tipos de datos de cadena o num\u00e9ricos. Tambi\u00e9n puedes utilizarlo para gestionar estados de distintos tipos de datos, como matrices, objetos y booleanos.<\/p>\n<h3>Utilizar matrices con el gancho useState<\/h3>\n<p>Puedes utilizar el Gancho <code>useState<\/code> para gestionar un array en React. Por ejemplo, si tienes una matriz de frutas, puedes inicializar su estado con la matriz:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction App() {\n  const [list, setList] = useState(['apple', 'banana', 'orange']);\n\n  const addToList = () =&gt; {\n    const newItem = 'grape';\n    setList([...list, newItem]);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;ul&gt;\n        {list.map((item) =&gt; (\n          &lt;li key={item}&gt;{item}&lt;\/li&gt;\n        ))}\n      &lt;\/ul&gt;\n      &lt;button onClick={addToList}&gt;Add Item&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>En este ejemplo, estamos utilizando <code>useState<\/code> para gestionar un array llamado <code>list<\/code>. El estado inicial de <code>list<\/code> se establece en un array que contiene tres elementos: <strong>apple<\/strong>, <strong>banana<\/strong> y <strong>orange<\/strong>.<\/p>\n<p>Tambi\u00e9n creamos una funci\u00f3n <code>addToList<\/code> que copia todos los elementos de la matriz con el <a href=\"https:\/\/kinqsta.com\/es\/blog\/operador-javascript-spread\/\">operador de propagaci\u00f3n<\/a> (<code>...<\/code>) y luego a\u00f1ade un nuevo elemento <strong>grape<\/strong> a la matriz <code>list<\/code> cada vez que se pulsa el bot\u00f3n \u00abA\u00f1adir elemento\u00bb.<\/p>\n<p>Esta vez, no vamos a actualizar el estado en l\u00ednea utilizando una funci\u00f3n de flecha porque es m\u00e1s apropiado crear esta operaci\u00f3n como una funci\u00f3n independiente y llamarla a trav\u00e9s del m\u00e9todo <code>onClick<\/code> a\u00f1adido al bot\u00f3n <strong>Add item<\/strong>.<\/p>\n<h3>Utilizar objetos con el gancho useState<\/h3>\n<p>Tambi\u00e9n puedes utilizar el Gancho <code>useState<\/code> para gestionar un objeto en React. Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction App() {\n  const [user, setUser] = useState({ name: 'John', age: 30 });\n\n  const handleClick = () =&gt; {\n    setUser({ ...user, age: user.age + 1 });\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Name: {user.name}&lt;\/p&gt;\n      &lt;p&gt;Age: {user.age}&lt;\/p&gt;\n      &lt;button onClick={handleClick}&gt;Increase Age&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>En este ejemplo, estamos utilizando <code>useState<\/code> para gestionar un objeto llamado usuario. El estado inicial de <code>user<\/code> es un objeto que contiene dos propiedades: <strong>name<\/strong> y <strong>age<\/strong>.<\/p>\n<p>Tambi\u00e9n tenemos una funci\u00f3n <code>handleClick<\/code> que copia todos los datos del objeto con el operador de propagaci\u00f3n (<code>...<\/code>) y tambi\u00e9n aumenta la edad del usuario en <strong>1<\/strong> cada vez que se pulsa el bot\u00f3n <strong>Increase age<\/strong>.<\/p>\n<p>Es importante que sepas que puedes asignar este objeto a una variable y luego inicializar la variable. Esto es \u00fatil cuando tienes un objeto o matriz grande y quieres escribir un c\u00f3digo f\u00e1cil de entender:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\/\/ Declare data\nlet userData = {\n    name: 'John',\n    age: 30,\n};\n\nfunction App() {\n    const [user, setUser] = useState(userData);\n\n    const handleClick = () =&gt; {\n        setUser({ ...user, age: user.age + 1 });\n    };\n\n    return (\n        &lt;div&gt;\n            &lt;p&gt;Name: {user.name}&lt;\/p&gt;\n            &lt;p&gt;Age: {user.age}&lt;\/p&gt;\n            &lt;button onClick={handleClick}&gt;Increase Age&lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n}\n\nexport default App;<\/code><\/pre>\n<h3>Utilizar booleanos con el gancho useState<\/h3>\n<p>Tambi\u00e9n puedes utilizar el Gancho <code>useState<\/code> para gestionar un valor booleano en React. Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction App() {\n  const [isOn, setIsOn] = useState(false);\n\n  const toggleSwitch = () =&gt; {\n    setIsOn(!isOn);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;The switch is {isOn ? 'on' : 'off'}&lt;\/p&gt;\n      &lt;button onClick={toggleSwitch}&gt;Toggle Switch&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>En este ejemplo, estamos utilizando <code>useState<\/code> para gestionar un valor booleano llamado <code>isOn<\/code>. El estado inicial de <code>isOn<\/code> se establece en <code>false<\/code>. Tambi\u00e9n tenemos una funci\u00f3n <code>toggleSwitch<\/code> que alterna el valor de <code>isOn<\/code> cada vez que se pulsa el bot\u00f3n <strong>Conmutar<\/strong>.<\/p>\n<p>Esta funci\u00f3n puede utilizarse para gestionar la alternancia de los modos oscuro y claro en tus proyectos.<\/p>\n<p>Antes de terminar, vamos a explorar un uso m\u00e1s avanzado del Gancho <code>useState<\/code> con formularios.<\/p>\n<h2>El Gancho useState y los Formularios<\/h2>\n<p>Para manejar los datos de los formularios y la entrada del usuario en React, se utiliza state. \u00c9ste se utiliza para hacer un seguimiento de los valores actuales de los elementos del formulario. Realiza un seguimiento de todas las interacciones del usuario, como teclear una entrada de texto o seleccionar una opci\u00f3n de un desplegable, y finalmente actualiza el estado con el nuevo valor.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de uso de <code>useState<\/code> para crear un formulario sencillo:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nlet formStateData = {\n    firstName: '',\n    lastName: '',\n    email: '',\n};\n\nfunction Form() {\n    const [formData, setFormData] = useState(formStateData);\n\n    const handleInputChange = (event) =&gt; {\n        const { name, value } = event.target;\n        setFormData({ ...formData, [name]: value });\n    };\n\n    const handleSubmit = (event) =&gt; {\n        event.preventDefault();\n        console.log(formData);\n    };\n\n    return (\n        &lt;form onSubmit={handleSubmit}&gt;\n            &lt;input\n                type=\"text\"\n                name=\"firstName\"\n                value={formData.firstName}\n                onChange={handleInputChange}\n            \/&gt;\n            &lt;input\n                type=\"text\"\n                name=\"lastName\"\n                value={formData.lastName}\n                onChange={handleInputChange}\n            \/&gt;\n            &lt;input\n                type=\"email\"\n                name=\"email\"\n                value={formData.email}\n                onChange={handleInputChange}\n            \/&gt;\n            &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\n        &lt;\/form&gt;\n    );\n}\n\nexport default Form;<\/code><\/pre>\n<p>En este ejemplo, primero creamos un objeto para los datos que se recoger\u00e1n con el formulario con valores por defecto para los campos <strong>FirstName<\/strong>,\u00a0<strong>name<\/strong> y\u00a0<strong>email<\/strong>. A continuaci\u00f3n, inicializamos el estado <code>formData<\/code> utilizando <code>useState<\/code>.<\/p>\n<pre><code class=\"language-jsx\">let formStateData = {\n    firstName: '',\n    lastName: '',\n    email: '',\n};\n\nconst [formData, setFormData] = useState(formStateData);<\/code><\/pre>\n<p>A continuaci\u00f3n, definimos una funci\u00f3n <code>handleInputChange<\/code> que actualiza el estado <code>formData<\/code> cada vez que se modifica un campo del formulario.<\/p>\n<pre><code class=\"language-jsx\">const handleInputChange = (event) =&gt; {\n    const { name, value } = event.target;\n    setFormData({ ...formData, [name]: value });\n};<\/code><\/pre>\n<p>Por \u00faltimo, definimos una funci\u00f3n <code>handleSubmit<\/code> que registra los datos actuales del formulario en la consola cuando se env\u00eda el formulario.<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (event) =&gt; {\n    event.preventDefault();\n    console.log(formData);\n};<\/code><\/pre>\n<h2>Las Mejores Pr\u00e1cticas de useState<\/h2>\n<p>Al utilizar el Gancho <code>useState<\/code>, es importante seguir las mejores pr\u00e1cticas para evitar errores comunes y garantizar un rendimiento \u00f3ptimo. Aqu\u00ed tienes algunos consejos a tener en cuenta:<\/p>\n<ul>\n<li><strong>Evita anidar profundamente<\/strong> <strong>el estado<\/strong>: En lugar de almacenar datos de estado complejos en un \u00fanico objeto, considera la posibilidad de dividirlos en trozos m\u00e1s peque\u00f1os para facilitar su gesti\u00f3n.<\/li>\n<li><strong>Utiliza actualizaciones funcionales<\/strong>: Cuando actualices el estado bas\u00e1ndote en el estado anterior, utiliza actualizaciones funcionales para evitar condiciones de carrera y asegurarte de que se actualiza el estado correcto.<\/li>\n<li><strong>Evita actualizaciones de estado excesivas<\/strong>: Actualizar el estado puede ser costoso, as\u00ed que intenta minimizar el n\u00famero de actualizaciones que realizas. Considera la posibilidad de utilizar el Gancho <code>useEffect<\/code> para realizar actualizaciones por lotes y optimizar el rendimiento.<\/li>\n<li><strong>Evita redistribuciones innecesarias<\/strong>: React volver\u00e1 a renderizar un componente cada vez que cambie su estado o sus accesorios. Para evitar redistribuciones innecesarias, utiliza la funci\u00f3n memo.<\/li>\n<\/ul>\n\n<h2>Resumen<\/h2>\n<p>En este art\u00edculo, hemos explorado en profundidad el Gancho <code>useState<\/code> y hemos aprendido a utilizarlo para a\u00f1adir estado a componentes funcionales. Tambi\u00e9n hemos hablado de c\u00f3mo utilizar <code>useState<\/code> con formularios, matrices y objetos, y hemos tratado las mejores pr\u00e1cticas para un rendimiento \u00f3ptimo. Si sigues estas pr\u00e1cticas recomendadas, te asegurar\u00e1s de que tus aplicaciones React sean eficientes, escalables y f\u00e1ciles de mantener.<\/p>\n<p>\u00bfBuscas la soluci\u00f3n de alojamiento ideal para tus aplicaciones React? \u00a1Prueba gratis el <a href=\"https:\/\/sevalla.com\/application-hosting\/\">alojamiento de aplicaciones de Kinsta<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React es una popular biblioteca JavaScript utilizada para construir interfaces de usuario. Proporciona a los desarrolladores una amplia gama de herramientas, incluidos los Ganchos, para que &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66802,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1321],"class_list":["post-66801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Primeros pasos con el gancho useState en React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Primeros Pasos con el Gancho useState en React\" \/>\n<meta property=\"og:description\" content=\"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T09:20:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:29:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Primeros Pasos con el Gancho useState en React\",\"datePublished\":\"2023-09-01T09:20:08+00:00\",\"dateModified\":\"2025-10-01T19:29:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\"},\"wordCount\":1446,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\",\"name\":\"Primeros pasos con el gancho useState en React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg\",\"datePublished\":\"2023-09-01T09:20:08+00:00\",\"dateModified\":\"2025-10-01T19:29:16+00:00\",\"description\":\"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Primeros Pasos con el Gancho useState en React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Primeros pasos con el gancho useState en React - Kinsta\u00ae","description":"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!","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:\/\/kinqsta.com\/es\/blog\/usestate-react\/","og_locale":"es_ES","og_type":"article","og_title":"Primeros Pasos con el Gancho useState en React","og_description":"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!","og_url":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-09-01T09:20:08+00:00","article_modified_time":"2025-10-01T19:29:16+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Primeros Pasos con el Gancho useState en React","datePublished":"2023-09-01T09:20:08+00:00","dateModified":"2025-10-01T19:29:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/"},"wordCount":1446,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/","url":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/","name":"Primeros pasos con el gancho useState en React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg","datePublished":"2023-09-01T09:20:08+00:00","dateModified":"2025-10-01T19:29:16+00:00","description":"\u00a1Mejora tu aplicaci\u00f3n React con el gancho useState! \u00a1Nuestra gu\u00eda para principiantes cubre todo lo que necesitas saber sobre la gesti\u00f3n del estado en funcionamiento!","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/usestate-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/usestate-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/usestate-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinqsta.com\/es\/secciones\/react\/"},{"@type":"ListItem","position":3,"name":"Primeros Pasos con el Gancho useState en React"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/66801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=66801"}],"version-history":[{"count":9,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/66801\/revisions"}],"predecessor-version":[{"id":70144,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/66801\/revisions\/70144"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66801\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/66802"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=66801"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=66801"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=66801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}