{"id":66584,"date":"2023-06-02T08:22:05","date_gmt":"2023-06-02T06:22:05","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=66584&#038;post_type=knowledgebase&#038;preview_id=66584"},"modified":"2025-10-01T21:29:40","modified_gmt":"2025-10-01T19:29:40","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\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","title":{"rendered":"C\u00f3mo Solucionar el Error \u00abReact Hooks must be called in a React Function Component or a Custom React Hook Function\u00bb"},"content":{"rendered":"<p>Los Hooks de React han revolucionado la forma de escribir componentes funcionales en <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-react-js\/\">React<\/a>, proporcionando una forma concisa y potente de gestionar el estado y los efectos secundarios.<\/p>\n<p>Sin embargo, como ocurre con cualquier caracter\u00edstica nueva, viene con su propio conjunto de reglas y directrices. Un error com\u00fan con el que se pueden encontrar los <a href=\"https:\/\/kinqsta.com\/es\/blog\/tipos-de-desarrolladores\/\">desarrolladores<\/a> de React es el de \u00abreact hooks must be called in a react function component or a custom react hook function\u00bb (los hooks de react deben ser llamados dentro de un componente de funci\u00f3n de react o una funci\u00f3n de hook personalizado de react).<\/p>\n<p>En este art\u00edculo, profundizaremos en los detalles de este error, comprenderemos por qu\u00e9 se produce y proporcionaremos las mejores pr\u00e1cticas para solucionarlo.<\/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 Causa el Error \u00abReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u00bb?<\/h2>\n<p>Hay reglas relacionadas con el uso de React Hooks. Muchos desarrolladores React se saltan estas reglas cuando aprenden React, lo que conduce a errores. Uno de estos errores es \u00abreact hooks must be called in a react function component or a custom react hook function\u00bb.<\/p>\n<p>Este error se produce cuando ocurren dos cosas importantes<\/p>\n<ul>\n<li>Usar React Hooks en componentes de clase<\/li>\n<li>Llamar a React Hooks dentro de una funci\u00f3n anidada<\/li>\n<\/ul>\n<p>Los React Hooks, como <code>useState<\/code>, <code>useEffect<\/code>, y <code>useContext<\/code>, est\u00e1n dise\u00f1ados para ser llamados en el nivel superior de un componente funcional o de una funci\u00f3n hook personalizada. Adem\u00e1s, s\u00f3lo deben invocarse en componentes funcionales y no en componentes de clase. Estas son dos reglas principales de los <a href=\"https:\/\/kinqsta.com\/es\/blog\/react-hook-useeffect-has-a-missing-dependency\/\">React Hooks<\/a>, que garantizan que los Hooks se utilicen de forma correcta y coherente en los componentes React.<\/p>\n<p>Cuando los Hooks se llaman en lugares no v\u00e1lidos, se obtiene este error \u00abreact hooks must be called in a react function component or a custom react hook function\u00bb. existe como una medida de seguridad para evitar que los Hooks se utilicen de formas que puedan causar comportamientos inesperados y fallos en tu <a href=\"https:\/\/kinqsta.com\/es\/blog\/clon-chatgpt\/\">aplicaci\u00f3n React<\/a>.<\/p>\n\n<h2>2 Formas de Solucionar el Error \u00abReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u00bb<\/h2>\n<p>Este error puede solucionarse de varias maneras, dependiendo de la situaci\u00f3n o de c\u00f3mo hayas utilizado incorrectamente el React Hook.<\/p>\n<h3>1. Nunca Llames a React Hooks en Componentes de Clase<\/h3>\n<p>Los Hooks est\u00e1n dise\u00f1ados para funcionar s\u00f3lo con <a href=\"https:\/\/kinqsta.com\/es\/blog\/componentes-web\/\">componentes<\/a> funcionales o ganchos personalizados \u2014\u00a0 porque utilizan el stack de llamadas de los componentes funcionales para gestionar el estado y el ciclo de vida del componente. Los componentes de clase no tienen este stack de llamadas, por lo que no puedes utilizar Hooks directamente en ellos.<\/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>Si lo haces, obtendr\u00e1s este error:<\/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=\"Error en la funci\u00f3n React\" width=\"1600\" height=\"125\"><figcaption class=\"wp-caption-text\">Error<\/figcaption><\/figure>\n<p>Sin embargo, hay algunas formas de solucionarlo, dependiendo de tus preferencias. Puedes decidir utilizar <code>state<\/code> y <code>setState<\/code> con componentes de clase, convertir el componente en un componente funcional o utilizar un Higher-Order Component (HOC) o Componente de Orden Superior.<\/p>\n<h4>A. Convertir el Componente de Clase en un Componente Funcional<\/h4>\n<p>La \u00fanica forma en que pueden funcionar los Hooks es cuando utilizas un componente funcional. Esto se debe a que los Hooks est\u00e1n dise\u00f1ados para trabajar con componentes funcionales.<\/p>\n<p>En el ejemplo siguiente, el componente de clase anterior se convierte en un 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. Utilizar un Componente de Orden Superior (Higher-Order Component (HOC)<\/h4>\n<p>Una forma de utilizar Hooks en un componente de clase es utilizar un Componente de Orden Superior (HOC).<\/p>\n<p>Un HOC es una funci\u00f3n que toma un componente y devuelve un nuevo componente con accesorios o funciones adicionales. Aqu\u00ed tienes un ejemplo de c\u00f3mo utilizar un HOC para proporcionar Hooks a un componente de clase:<\/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. Utilizar Estados en un Componente de Clase<\/h4>\n<p>Por \u00faltimo, supongamos que no quieres cambiar la sintaxis de tu componente. Puedes decidir utilizar <code>state<\/code> y <code>setState<\/code> en lugar del Hook useState:<\/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 Llames a React Hooks Dentro de una Funci\u00f3n Anidada<\/h3>\n<p>Una regla clara de los React Hooks es que todos los Hooks deben llamarse al nivel superior de un componente funcional o de una funci\u00f3n hook personalizada. Cuando llamas a un Hooks dentro de una funci\u00f3n anidada, has infringido la regla.<\/p>\n<p>En el ejemplo siguiente, el Hook <code>useState<\/code> se llama en la funci\u00f3n <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>Esto arrojar\u00e1 el siguiente error:<\/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=\"Otro error de React\" width=\"1600\" height=\"149\"><figcaption class=\"wp-caption-text\">Ejemplo de error<\/figcaption><\/figure>\n<p>Puedes solucionarlo moviendo el Hook fuera de la funci\u00f3n \u2014 al nivel superior de tu 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>Resumen<\/h2>\n<p>En este art\u00edculo, has aprendido qu\u00e9 causa el error \u00abreact hooks must be called in a react function component or a custom react hook function\u00bb (los hooks de react deben llamarse en un componente funcional de react o en una funci\u00f3n de hook de react personalizada), y c\u00f3mo puede solucionarse.<\/p>\n<p>Sigue siempre las reglas de los hooks de React cuando trabajes y los utilices en tus proyectos React para evitar experimentar errores como \u00e9ste.<\/p>\n<p>\u00bfBuscas la soluci\u00f3n de alojamiento ideal para tus aplicaciones React? \u00a1<a href=\"https:\/\/sevalla.com\/application-hosting\/\">Prueba gratis<\/a> el alojamiento de Aplicaciones de Kinsta!<\/p>\n<p><em>\u00a1Queremos conocer tu opini\u00f3n! \u00bfHas experimentado alguna vez este error? Si es as\u00ed, \u00bfc\u00f3mo lo resolviste? \u00bfHas utilizado alg\u00fan otro m\u00e9todo que no se haya mencionado en este art\u00edculo? Comparte tu opini\u00f3n en la secci\u00f3n de comentarios m\u00e1s abajo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los Hooks de React han revolucionado la forma de escribir componentes funcionales en React, proporcionando una forma concisa y potente de gestionar el estado y los &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66585,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1322,1321],"class_list":["post-66584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-errores-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 Solucionar el Error \u201cReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u201d - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a solucionar el error &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; con nuestra gu\u00eda.\" \/>\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\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Solucionar el Error &quot;React Hooks must be called in a React Function Component or a Custom React Hook Function&quot;\" \/>\n<meta property=\"og:description\" content=\"Aprende a solucionar el error &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; con nuestra gu\u00eda.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/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\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-02T06:22:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:29:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende a solucionar el error &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; con nuestra gu\u00eda.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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_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=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Solucionar el Error \u00abReact Hooks must be called in a React Function Component or a Custom React Hook Function\u00bb\",\"datePublished\":\"2023-06-02T06:22:05+00:00\",\"dateModified\":\"2025-10-01T19:29:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"},\"wordCount\":982,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\",\"name\":\"Como Solucionar el Error \u201cReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u201d - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"datePublished\":\"2023-06-02T06:22:05+00:00\",\"dateModified\":\"2025-10-01T19:29:40+00:00\",\"description\":\"Aprende a solucionar el error \\\"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\\\" con nuestra gu\u00eda.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Como Solucionar el Error \u201cReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u201d\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/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\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Errores React\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/errores-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Solucionar el Error \u00abReact Hooks must be called in a React Function Component or a Custom React Hook Function\u00bb\"}]},{\"@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":"Como Solucionar el Error \u201cReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u201d - Kinsta\u00ae","description":"Aprende a solucionar el error \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" con nuestra gu\u00eda.","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\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Solucionar el Error \"React Hooks must be called in a React Function Component or a Custom React Hook Function\"","og_description":"Aprende a solucionar el error \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" con nuestra gu\u00eda.","og_url":"https:\/\/kinqsta.com\/es\/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\/kinsta.es\/","article_published_time":"2023-06-02T06:22:05+00:00","article_modified_time":"2025-10-01T19:29:40+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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":"Aprende a solucionar el error \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" con nuestra gu\u00eda.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Solucionar el Error \u00abReact Hooks must be called in a React Function Component or a Custom React Hook Function\u00bb","datePublished":"2023-06-02T06:22:05+00:00","dateModified":"2025-10-01T19:29:40+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"},"wordCount":982,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","url":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","name":"Como Solucionar el Error \u201cReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u201d - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","datePublished":"2023-06-02T06:22:05+00:00","dateModified":"2025-10-01T19:29:40+00:00","description":"Aprende a solucionar el error \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" con nuestra gu\u00eda.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","width":1460,"height":730,"caption":"Como Solucionar el Error \u201cReact Hooks Must Be Called In a React Function Component or a Custom React Hook Function\u201d"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/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\/es\/"},{"@type":"ListItem","position":2,"name":"Errores React","item":"https:\/\/kinqsta.com\/es\/secciones\/errores-react\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Solucionar el Error \u00abReact Hooks must be called in a React Function Component or a Custom React Hook Function\u00bb"}]},{"@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\/66584","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=66584"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/66584\/revisions"}],"predecessor-version":[{"id":67037,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/66584\/revisions\/67037"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66584\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/66585"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=66584"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=66584"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=66584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}