{"id":59898,"date":"2023-06-02T03:21:49","date_gmt":"2023-06-02T06:21:49","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=59898&#038;post_type=knowledgebase&#038;preview_id=59898"},"modified":"2025-10-01T17:02:10","modified_gmt":"2025-10-01T20:02:10","slug":"react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","title":{"rendered":"Como Corrigir o Erro &#8220;React Hooks must be called in a React Function Component or a Custom React Hook Function&#8221;"},"content":{"rendered":"<p>O React Hooks revolucionou a maneira como escrevemos componentes funcionais no <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>, fornecendo uma maneira concisa e poderosa de gerenciar o estado e os efeitos colaterais.<\/p>\n<p>No entanto, como acontece com qualquer novo recurso, ele vem com seu pr\u00f3prio conjunto de regras e diretrizes. Um erro comum que os <a href=\"https:\/\/kinqsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">desenvolvedores<\/a> do React podem encontrar \u00e9 o erro &#8220;react hooks must be called in a react function component or a custom react hook function&#8221;.<\/p>\n<p>Neste artigo, iremos explorar os detalhes deste erro, entender por que ele ocorre e fornecer as melhores pr\u00e1ticas para corrigi-lo.<\/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>Quais s\u00e3o as causas do erro &#8220;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&#8221;?<\/h2>\n<p>Existem regras envolvidas no uso de React Hooks. Muitos desenvolvedores do React ignoram essas regras ao aprender React, o que leva a erros. Um desses erros \u00e9 &#8220;react hooks must be called in a react function component or a custom react hook function&#8221;.<\/p>\n<p>Esse erro ocorre quando duas coisas importantes acontecem:<\/p>\n<ul>\n<li>Usando React Hooks em componentes de classe<\/li>\n<li>Chamando React Hooks dentro de uma fun\u00e7\u00e3o aninhada<\/li>\n<\/ul>\n<p>React Hooks, como <code>useState<\/code>, <code>useEffect<\/code> e <code>useContext<\/code>, foram projetados para serem chamados no n\u00edvel superior de um componente funcional ou de uma fun\u00e7\u00e3o de hook personalizada. Eles tamb\u00e9m s\u00f3 devem ser chamados em componentes funcionais e n\u00e3o em componentes de classe. Essas s\u00e3o as duas principais regras do <a href=\"https:\/\/kinqsta.com\/pt\/blog\/react-hook-useeffect-has-a-missing-dependency\/\">React Hooks<\/a>, que garantem que os Hooks sejam usados de forma correta e consistente nos componentes React.<\/p>\n<p>Quando os Hooks s\u00e3o chamados em locais inv\u00e1lidos, voc\u00ea recebe este erro: &#8220;react hooks must be called in a react function component or a custom react hook function&#8221;. Esse erro do ESLint existe como uma prote\u00e7\u00e3o para evitar que os Hooks sejam usados de maneiras que possam causar comportamentos inesperados e bugs em seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/aplicativo-clone-chatgpt-react-e-api-openai\/\">aplicativo React<\/a>.<\/p>\n\n<h2>2 formas de corrigir o erro &#8220;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&#8221;<\/h2>\n<p>Esse erro pode ser corrigido de v\u00e1rias maneiras, dependendo da situa\u00e7\u00e3o ou de como voc\u00ea utilizou erroneamente o React Hook.<\/p>\n<h3>1. Nunca chame React Hooks em componentes de classe<\/h3>\n<p>Os Hooks s\u00e3o projetados para funcionar somente com <a href=\"https:\/\/kinqsta.com\/pt\/blog\/componentes-web\/\">componentes<\/a> funcionais ou hooks personalizados, porque eles usam a pilha de chamadas dos componentes funcionais para gerenciar o estado e o ciclo de vida do componente. Os componentes de classe n\u00e3o t\u00eam essa pilha de chamadas, portanto, voc\u00ea n\u00e3o pode usar Hooks diretamente neles.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\nclass Counter extends React.Component {\n    state = { count: 0 };\n    render() {\n        const [count, setCount] = useState(0);\n        \/\/ Error: React Hooks must be called in a React function component or a custom React Hook function\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;Click me&lt;\/button&gt;\n            &lt;\/div&gt;\n        );\n    }\n}\nexport default Counter;<\/code><\/pre>\n<p>Se fizer isso, voc\u00ea receber\u00e1 este erro:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/react-hook-error.jpg\" alt=\"React function error\" width=\"1600\" height=\"125\"><figcaption class=\"wp-caption-text\">Erro<\/figcaption><\/figure>\n<p>No entanto, h\u00e1 algumas maneiras de corrigir isso, dependendo da sua prefer\u00eancia. Voc\u00ea pode optar por usar <code>state<\/code> e <code>setState<\/code> com componentes de classe, converter o componente em um componente funcional ou usar um componente de ordem superior (HOC).<\/p>\n<h4>A. Converta o componente de classe em um componente funcional<\/h4>\n<p>A \u00fanica maneira dos Hooks funcionarem \u00e9 quando voc\u00ea est\u00e1 usando um componente funcional. Isso ocorre porque os Hooks foram projetados para trabalhar com componentes funcionais.<\/p>\n<p>No exemplo abaixo, o componente de classe anterior \u00e9 convertido em um componente funcional:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction MyComponent(props) {\n  const [count, setCount] = useState(0);\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Count: {count}&lt;\/p&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<h4>B. Use um componente de ordem superior (HOC)<\/h4>\n<p>Uma maneira de usar Hooks em um componente de classe \u00e9 usar um componente de ordem superior (HOC).<\/p>\n<p>O HOC \u00e9 uma fun\u00e7\u00e3o que recebe um componente e retorna um novo componente com adere\u00e7os ou funcionalidades adicionais. Aqui est\u00e1 um exemplo de como usar um HOC para fornecer Hooks a um componente de classe:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction withHooks(WrappedComponent) {\n  return function(props) {\n    const [count, setCount] = useState(0);\n    return (\n      &lt; WrappedComponent count={count} setCount={setCount} {...props} \/&gt;\n    );\n  };\n}\n\nclass MyComponent extends React.Component {\n  render() {\n    const { count, setCount } = this.props;\n    return (\n      &lt; div&gt;\n        &lt; p&gt;Count: {count}&lt; \/p&gt;\n        &lt; button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt; \/button&gt;\n      &lt; \/div&gt;\n    );\n  }\n}\n\nexport default withHooks(MyComponent);<\/code><\/pre>\n<h4>C. Uso de estados em um componente de classe<\/h4>\n<p>Por fim, suponha que voc\u00ea n\u00e3o queira alterar a sintaxe do seu componente. Voc\u00ea pode decidir usar <code>state<\/code> e <code>setState<\/code> em vez de useState Hook:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  handleIncrement = () =&gt; {\n    this.setState({ count: this.state.count + 1 });\n  }\n\n  render() {\n    return (\n      &lt;div&gt;\n        &lt;p&gt;Count: {this.state.count}&lt;\/p&gt;\n        &lt;button onClick={this.handleIncrement}&gt;Increment&lt;\/button&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n\nexport default MyComponent;<\/code><\/pre>\n<h3>2. Nunca chame React Hooks em uma fun\u00e7\u00e3o aninhada<\/h3>\n<p>Uma regra clara do React Hooks \u00e9 que todos os Hooks devem ser chamados no n\u00edvel superior de um componente funcional ou de uma fun\u00e7\u00e3o de hook personalizada. Quando voc\u00ea chama um Hook dentro de uma fun\u00e7\u00e3o aninhada, voc\u00ea infringiu a regra.<\/p>\n<p>No exemplo abaixo, o Hook <code>useState<\/code> \u00e9 chamado na fun\u00e7\u00e3o <code>handleClick<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\nfunction MyComponent() {\n    let count = 0;\n    function handleClick() {\n        const [count, setCount] = useState(0);\n        setCount(count + 1);\n    }\n    return (\n        &lt;div&gt;\n            &lt;p&gt;Count: {count}&lt;\/p&gt;\n            &lt;button onClick={handleClick}&gt;Increment&lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n}\n\nexport default MyComponent;<\/code><\/pre>\n<p>Isso gerar\u00e1 o seguinte erro:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/react-hook-nested-function-error.jpg\" alt=\"Another React error\" width=\"1600\" height=\"149\"><figcaption class=\"wp-caption-text\">Exemplo de erro<\/figcaption><\/figure>\n<p>Voc\u00ea pode corrigir isso movendo o Hook para fora da fun\u00e7\u00e3o, para o n\u00edvel superior do seu componente funcional:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction MyComponent() {\n    const [count, setCount] = useState(0);\n\n    function handleClick() {\n        setCount(count + 1);\n    }\n\n    return (\n        &lt;div&gt;\n            &lt;p&gt;Count: {count}&lt;\/p&gt;\n            &lt;button onClick={handleClick}&gt;Increment&lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n}\n\nexport default MyComponent;<\/code><\/pre>\n\n<h2>Resumo<\/h2>\n<p>Neste artigo, voc\u00ea aprendeu o que causa o erro &#8220;react hooks must be called in a react function component or a custom react hook function&#8221; e como corrigi-lo.<\/p>\n<p>Sempre siga as regras dos React Hooks ao trabalhar e utiliz\u00e1-los em seus projetos React para evitar erros como este.<\/p>\n<p>Voc\u00ea est\u00e1 procurando a solu\u00e7\u00e3o de hospedagem ideal para seus aplicativos React? Experimente a hospedagem de aplicativos da Kinsta <a href=\"https:\/\/sevalla.com\/application-hosting\/\">gratuitamente<\/a>!<\/p>\n<p><em>Queremos ouvir voc\u00ea! J\u00e1 encontrou esse erro antes? Se sim, como resolveu? Utilizou alguma abordagem diferente das mencionadas neste artigo? Compartilhe suas opini\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O React Hooks revolucionou a maneira como escrevemos componentes funcionais no React, fornecendo uma maneira concisa e poderosa de gerenciar o estado e os efeitos colaterais. &#8230;<\/p>\n","protected":false},"author":287,"featured_media":59899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1003,1002],"class_list":["post-59898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erros-do-react","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>Como Corrigir o Erro &quot;React Hooks must be called in a React Function Component or a Custom React Hook Function&quot; - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprenda como corrigir o erro &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; com o nosso guia.\" \/>\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\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Corrigir o Erro &quot;React Hooks must be called in a React Function Component or a Custom React Hook Function&quot;\" \/>\n<meta property=\"og:description\" content=\"Aprenda como corrigir o erro &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; com o nosso guia.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\" \/>\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-06-02T06:21:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:02:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.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=\"Aprenda como corrigir o erro &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; com o nosso guia.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.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=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Corrigir o Erro &#8220;React Hooks must be called in a React Function Component or a Custom React Hook Function&#8221;\",\"datePublished\":\"2023-06-02T06:21:49+00:00\",\"dateModified\":\"2025-10-01T20:02:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"},\"wordCount\":895,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\",\"name\":\"Como Corrigir o Erro \\\"React Hooks must be called in a React Function Component or a Custom React Hook Function\\\" - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"datePublished\":\"2023-06-02T06:21:49+00:00\",\"dateModified\":\"2025-10-01T20:02:10+00:00\",\"description\":\"Aprenda como corrigir o erro \\\"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\\\" com o nosso guia.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erros do React\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/erros-do-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Corrigir o Erro &#8220;React Hooks must be called in a React Function Component or a Custom React Hook Function&#8221;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Corrigir o Erro \"React Hooks must be called in a React Function Component or a Custom React Hook Function\" - Kinsta\u00ae","description":"Aprenda como corrigir o erro \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" com o nosso guia.","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\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Corrigir o Erro \"React Hooks must be called in a React Function Component or a Custom React Hook Function\"","og_description":"Aprenda como corrigir o erro \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" com o nosso guia.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-06-02T06:21:49+00:00","article_modified_time":"2025-10-01T20:02:10+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda como corrigir o erro \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" com o nosso guia.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Corrigir o Erro &#8220;React Hooks must be called in a React Function Component or a Custom React Hook Function&#8221;","datePublished":"2023-06-02T06:21:49+00:00","dateModified":"2025-10-01T20:02:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"},"wordCount":895,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","url":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","name":"Como Corrigir o Erro \"React Hooks must be called in a React Function Component or a Custom React Hook Function\" - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","datePublished":"2023-06-02T06:21:49+00:00","dateModified":"2025-10-01T20:02:10+00:00","description":"Aprenda como corrigir o erro \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" com o nosso guia.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Erros do React","item":"https:\/\/kinqsta.com\/pt\/topicos\/erros-do-react\/"},{"@type":"ListItem","position":3,"name":"Como Corrigir o Erro &#8220;React Hooks must be called in a React Function Component or a Custom React Hook Function&#8221;"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/59898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=59898"}],"version-history":[{"count":6,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/59898\/revisions"}],"predecessor-version":[{"id":60605,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/59898\/revisions\/60605"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/translations\/es"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59898\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/59899"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=59898"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=59898"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=59898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}