{"id":60170,"date":"2023-11-13T06:20:19","date_gmt":"2023-11-13T09:20:19","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=60170&#038;post_type=knowledgebase&#038;preview_id=60170"},"modified":"2025-10-01T17:00:41","modified_gmt":"2025-10-01T20:00:41","slug":"usestate-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/","title":{"rendered":"Iniciando Com o Hook useState no React"},"content":{"rendered":"<p>React \u00e9 uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">biblioteca JavaScript<\/a> popular utilizada para construir interfaces de usu\u00e1rio. Oferece aos <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">desenvolvedores<\/a> diversos recursos, como os Hooks, que tornam o desenvolvimento de aplicativos mais simples e eficaz.<\/p>\n<p>Um dos Hooks mais utilizados \u00e9 o <code>useState<\/code>, que possibilita aos desenvolvedores adicionar estado a componentes funcionais.<\/p>\n<p>Neste artigo, vamos examinar detalhadamente o <code>useState<\/code>, seus usos e as melhores pr\u00e1ticas para sua implanta\u00e7\u00e3o.<\/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>O que \u00e9 Hook useState?<\/h2>\n<p>Antes de explorarmos os detalhes do <code>useState<\/code>, vamos primeiro definir o que s\u00e3o Hooks e como eles diferem dos componentes de classe tradicionais.<\/p>\n<p>Os Hooks s\u00e3o fun\u00e7\u00f5es especiais que permite que voc\u00ea use o estado e outros recursos do <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> em componentes funcionais.<\/p>\n<p>Ao contr\u00e1rio dos componentes de classe, os componentes funcionais n\u00e3o possuem uma forma integrada de armazenar o estado. Hooks como o <code>useState<\/code> resolvem esse problema, permitindo que voc\u00ea adicione estado aos componentes funcionais.<\/p>\n\n<h3>Contexto do Hook useState<\/h3>\n<p>Antes da introdu\u00e7\u00e3o do Hook <code>useState<\/code> no React 16.8, os componentes funcionais n\u00e3o conseguiam manter seu pr\u00f3prio estado. Devido a isso, os desenvolvedores tinham que usar componentes de classe ou bibliotecas externas de gerenciamento de estado, como o Redux, para gerenciar o estado em seus aplicativos.<\/p>\n<p>Embora os componentes de classe e as bibliotecas externas de gerenciamento de estado ainda sejam op\u00e7\u00f5es vi\u00e1veis, a introdu\u00e7\u00e3o do Hook <code>useState<\/code> tornou muito mais f\u00e1cil para os desenvolvedores adicionar estado aos seus componentes funcionais e simplificou a <a href=\"https:\/\/kinsta.com\/pt\/blog\/rest-api-vs-web-api\/\">API<\/a> do React, em geral.<\/p>\n<p>Com o Hook <code>useState<\/code>, os desenvolvedores podem usar componentes funcionais para a maioria dos casos de uso, reduzindo a quantidade de c\u00f3digo padr\u00e3o necess\u00e1rio e facilitando a avalia\u00e7\u00e3o do estado em seus aplicativos.<\/p>\n<p>\u00a0<\/p>\n<h3>Componentes da sintaxe useState<\/h3>\n<p>O Hook <code>useState<\/code> recebe um valor de estado inicial como argumento e retorna uma array que cont\u00e9m dois elementos: o valor do estado atual e uma fun\u00e7\u00e3o que atualiza o valor do estado.<\/p>\n<p>Aqui est\u00e1 a sintaxe:<\/p>\n<pre><code class=\"language-jsx\">const [state, setState] = useState(initialState);<\/code><\/pre>\n<ul>\n<li><code>state<\/code>: O valor do estado atual.<\/li>\n<li><code>setState<\/code>: Uma fun\u00e7\u00e3o que atualiza o valor do estado.<\/li>\n<li><code>initialState<\/code>: O valor inicial da vari\u00e1vel de estado que est\u00e1 sendo declarada. Isso \u00e9 opcional. Quando nenhum valor \u00e9 fornecido (o que n\u00e3o \u00e9 aconselh\u00e1vel), ele \u00e9 automaticamente definido como <code>undefined<\/code>.<\/li>\n<\/ul>\n<p>\u00c9 importante observar que, ao usar o Hook <code>useState<\/code>, o React renderizar\u00e1 automaticamente seu componente sempre que o valor do estado for alterado.<\/p>\n<h2>Como usar o Hook useState<\/h2>\n<p>Para implementar o <code>useState<\/code>, chame a fun\u00e7\u00e3o e passe um valor inicial como argumento. A fun\u00e7\u00e3o retorna uma array que cont\u00e9m o valor do estado atual e uma fun\u00e7\u00e3o para atualizar o estado.<\/p>\n<p>Aqui est\u00e1 um exemplo de uso do <code>useState<\/code> para gerenciar um contador simples:<\/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>Neste exemplo, inicializamos o estado <code>count<\/code> como 0 usando o Hook <code>useState<\/code>. Em seguida, renderizamos o valor de contagem atual e um bot\u00e3o. Quando o bot\u00e3o for clicado, o valor da contagem ser\u00e1 incrementado porque adicionamos uma fun\u00e7\u00e3o de seta com a fun\u00e7\u00e3o <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>Ao usar o Hook <code>useState<\/code>, \u00e9 importante lembrar de import\u00e1-lo da biblioteca do React. Caso voc\u00ea esque\u00e7a de import\u00e1-lo, provavelmente encontrar\u00e1 erros ao tentar usar o Hook. Veja a seguir como voc\u00ea pode importar o useState:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';<\/code><\/pre>\n<p>Ao incluir <code>useState<\/code> na instru\u00e7\u00e3o de importa\u00e7\u00e3o, voc\u00ea est\u00e1 dizendo ao React que deseja usar o Hook <code>useState<\/code> em seu componente.<\/p>\n<h2>Usando tipos de dados diferentes com o Hook useState no React<\/h2>\n<p>O Hook <code>useState<\/code> no React n\u00e3o se limita a gerenciar apenas tipos de dados num\u00e9ricos ou de string de caracteres. Voc\u00ea tamb\u00e9m pode us\u00e1-lo para gerenciar estados de diferentes tipos de dados, como arrays, objetos e booleanos.<\/p>\n<h3>Uso de arrays com o Hook useState<\/h3>\n<p>Voc\u00ea pode usar o Hook <code>useState<\/code> para gerenciar um array no React. Por exemplo, se voc\u00ea tiver uma array de frutas, poder\u00e1 inicializar seu estado com a array:<\/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>Neste exemplo, estamos usando <code>useState<\/code> para gerenciar uma array chamado <code>list<\/code>. O estado inicial de <code>list<\/code> \u00e9 definido como uma array que cont\u00e9m tr\u00eas itens: <strong>ma\u00e7\u00e3<\/strong>, <strong>banana<\/strong> e <strong>laranja<\/strong>.<\/p>\n<p>Tamb\u00e9m criamos uma fun\u00e7\u00e3o <code>addToList<\/code> que copia todos os itens da array com o operador de spread (<code>...<\/code>) e, em seguida, adiciona um novo item <strong>uva<\/strong>\u00a0\u00e0 array <code>list<\/code> sempre que o bot\u00e3o &#8220;Adicionar Item&#8221; for clicado.<\/p>\n<p>Nesta ocasi\u00e3o, n\u00e3o estamos atualizando o estado diretamente utilizando uma fun\u00e7\u00e3o de seta, pois \u00e9 mais apropriado criar essa opera\u00e7\u00e3o como uma fun\u00e7\u00e3o separada e cham\u00e1-la atrav\u00e9s do m\u00e9todo\u00a0<code>onClick<\/code> adicionado ao bot\u00e3o <strong>&#8220;Adicionar Item&#8221;<\/strong>.<\/p>\n<h3>Uso de objetos com o Hook ok useState<\/h3>\n<p>Voc\u00ea tamb\u00e9m pode usar o Hook <code>useState<\/code> para gerenciar um objeto no React. Aqui est\u00e1 um exemplo:<\/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>Neste exemplo, estamos usando o <code>useState<\/code> para gerenciar um objeto chamado usu\u00e1rio. O estado inicial do <code>user<\/code> \u00e9 definido como um objeto que cont\u00e9m duas propriedades: <strong>nome<\/strong> e <strong>idade<\/strong>.<\/p>\n<p>Tamb\u00e9m temos uma fun\u00e7\u00e3o <code>handleClick<\/code> que copia todos os dados do objeto com o operador de propaga\u00e7\u00e3o (<code>...<\/code>) e tamb\u00e9m aumenta a idade do usu\u00e1rio em <strong>1<\/strong> sempre que o bot\u00e3o <strong>Aumentar Idade<\/strong>\u00a0\u00e9 clicado.<\/p>\n<p>\u00c9 importante saber que voc\u00ea pode atribuir esse objeto a uma vari\u00e1vel e, em seguida, inicializar a vari\u00e1vel. Isso \u00e9 \u00fatil quando voc\u00ea tem um objeto ou array grande e deseja escrever um 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>Uso de booleanos com o Hook useState<\/h3>\n<p>Voc\u00ea tamb\u00e9m pode usar o Hook <code>useState<\/code> para gerenciar um valor booleano no React. Aqui est\u00e1 um exemplo:<\/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>Neste exemplo, estamos usando <code>useState<\/code> para gerenciar um valor booleano chamado <code>isOn<\/code>. O estado inicial de <code>isOn<\/code> \u00e9 definido como <code>false<\/code>. Tamb\u00e9m temos uma fun\u00e7\u00e3o <code>toggleSwitch<\/code> que alterna o valor de <code>isOn<\/code> sempre que o bot\u00e3o <strong>Toggle Switch<\/strong> \u00e9 clicado.<\/p>\n<p>Esse recurso pode ser utilizado para gerenciar a altern\u00e2ncia dos modos claro e escuro em seus projetos.<\/p>\n<p>Antes de finalizarmos, vamos investigar uma aplica\u00e7\u00e3o mais sofisticada do Hook <code>useState<\/code> em formul\u00e1rios.<\/p>\n<h2>O Hook useState em formul\u00e1rios<\/h2>\n<p>Para gerenciar dados de formul\u00e1rios e entradas de usu\u00e1rios no React, voc\u00ea usa o estado. Isso \u00e9 usado para manter o controle dos valores atuais dos elementos do formul\u00e1rio. Ele registra todas as intera\u00e7\u00f5es do usu\u00e1rio, como digitar em uma entrada de texto ou selecionar uma op\u00e7\u00e3o em um menu suspenso, e por fim atualiza o estado com o novo valor.<\/p>\n<p>Aqui est\u00e1 um exemplo de uso do site <code>useState<\/code> para criar um formul\u00e1rio simples:<\/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>Neste exemplo, primeiro criamos um objeto para os dados que ser\u00e3o coletados com o formul\u00e1rio com valores padr\u00e3o para os campos <strong>firstName<\/strong>, <strong>lastName<\/strong> e <strong>email<\/strong>. Em seguida, inicializamos o estado <code>formData<\/code> usando <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>Em seguida, definimos uma fun\u00e7\u00e3o <code>handleInputChange<\/code> que atualiza o estado <code>formData<\/code> sempre que um campo do formul\u00e1rio \u00e9 alterado.<\/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 fim, definimos uma fun\u00e7\u00e3o <code>handleSubmit<\/code> que registra os dados do formul\u00e1rio atual no console quando o formul\u00e1rio \u00e9 enviado.<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (event) =&gt; {\n    event.preventDefault();\n    console.log(formData);\n};<\/code><\/pre>\n<h2>Melhores pr\u00e1ticas com o useState<\/h2>\n<p>Ao usar o Hook\u00a0<code>useState<\/code>, \u00e9 importante seguir as melhores pr\u00e1ticas para evitar erros comuns e garantir o desempenho ideal. Aqui est\u00e3o algumas dicas para ter em mente:<\/p>\n<ul>\n<li><strong>Evite estados estruturas complexas e aninhadas:<\/strong> Em vez de armazenar dados de estado complexos em um \u00fanico objeto, considere dividi-los em partes menores para facilitar o gerenciamento.<\/li>\n<li><strong>Use atualiza\u00e7\u00f5es funcionais:<\/strong> Ao atualizar o estado com base no estado anterior, utilize atualiza\u00e7\u00f5es funcionais. Isso ajuda a evitar problemas de concorr\u00eancia e garante que o estado seja atualizado corretamente.<\/li>\n<li><strong>Evite atualiza\u00e7\u00f5es de estado excessivas:<\/strong> Atualizar o estado pode ser caro, portanto, tente minimizar o n\u00famero de atualiza\u00e7\u00f5es que voc\u00ea faz. Considere a possibilidade de usar o Hook\u00a0<code>useEffect<\/code> para agrupar atualiza\u00e7\u00f5es e otimizar o desempenho.<\/li>\n<li><strong>Evite<\/strong> <strong>renderiza\u00e7\u00f5es desnecess\u00e1rias:<\/strong> O React renderizar\u00e1 novamente um componente sempre que o estado ou as propriedades forem alterados. Para evitar novas renderiza\u00e7\u00f5es desnecess\u00e1rias, use a fun\u00e7\u00e3o memo.<\/li>\n<\/ul>\n\n<h2>Resumo<\/h2>\n<p>Neste artigo, exploramos o Hook <code>useState<\/code> em detalhes e aprendemos a us\u00e1-lo para adicionar estado a componentes funcionais. Tamb\u00e9m discutimos como usar o <code>useState<\/code> com formul\u00e1rios, arrays e objetos, e abordamos as melhores pr\u00e1ticas para que voc\u00ea tenha um desempenho ideal. Seguindo essas pr\u00e1ticas recomendadas, voc\u00ea pode garantir que seus aplicativos React sejam eficientes, escalon\u00e1veis e f\u00e1ceis de manter.<\/p>\n<p>Voc\u00ea est\u00e1 procurando a solu\u00e7\u00e3o de hospedagem ideal para seus aplicativos React? Experimente a <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos\u00a0da Kinsta<\/a> gratuitamente!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React \u00e9 uma biblioteca JavaScript popular utilizada para construir interfaces de usu\u00e1rio. Oferece aos desenvolvedores diversos recursos, como os Hooks, que tornam o desenvolvimento de aplicativos &#8230;<\/p>\n","protected":false},"author":287,"featured_media":60171,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1002],"class_list":["post-60170","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>Iniciando Com o Hook useState no React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Iniciando Com o Hook useState no React\" \/>\n<meta property=\"og:description\" content=\"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-13T09:20:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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:\/\/kinsta.com\/pt\/blog\/usestate-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Iniciando Com o Hook useState no React\",\"datePublished\":\"2023-11-13T09:20:19+00:00\",\"dateModified\":\"2025-10-01T20:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\"},\"wordCount\":1425,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\",\"name\":\"Iniciando Com o Hook useState no React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg\",\"datePublished\":\"2023-11-13T09:20:19+00:00\",\"dateModified\":\"2025-10-01T20:00:41+00:00\",\"description\":\"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Iniciando Com o Hook useState no React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Iniciando Com o Hook useState no React - Kinsta\u00ae","description":"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!","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:\/\/kinsta.com\/pt\/blog\/usestate-react\/","og_locale":"pt_PT","og_type":"article","og_title":"Iniciando Com o Hook useState no React","og_description":"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!","og_url":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-11-13T09:20:19+00:00","article_modified_time":"2025-10-01T20:00:41+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Iniciando Com o Hook useState no React","datePublished":"2023-11-13T09:20:19+00:00","dateModified":"2025-10-01T20:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/"},"wordCount":1425,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/","url":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/","name":"Iniciando Com o Hook useState no React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg","datePublished":"2023-11-13T09:20:19+00:00","dateModified":"2025-10-01T20:00:41+00:00","description":"Potencialize o seu aplicativo React com o Hook useState! Nosso guia para iniciantes abrange tudo o que voc\u00ea precisa saber sobre gerenciar o estado em componentes funcionais de forma simples e eficaz!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/usestate-react\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/usestate-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/usestate-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/pt\/topicos\/react\/"},{"@type":"ListItem","position":3,"name":"Iniciando Com o Hook useState no React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=60170"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60170\/revisions"}],"predecessor-version":[{"id":65013,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60170\/revisions\/65013"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60170\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/60171"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=60170"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=60170"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=60170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}