{"id":62482,"date":"2023-06-02T07:22:07","date_gmt":"2023-06-02T06:22:07","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=62482&#038;post_type=knowledgebase&#038;preview_id=62482"},"modified":"2025-10-01T20:15:47","modified_gmt":"2025-10-01T19:15:47","slug":"react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/","title":{"rendered":"So beheben Sie den Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;"},"content":{"rendered":"<p>React Hooks haben die Art und Weise, wie wir funktionale Komponenten in <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> schreiben, revolutioniert und bieten eine \u00fcbersichtliche und leistungsstarke M\u00f6glichkeit, Zust\u00e4nde und Seiteneffekte zu verwalten.<\/p>\n<p>Doch wie bei jeder neuen Funktion gibt es auch hier Regeln und Richtlinien. Ein h\u00e4ufiger Fehler, auf den <a href=\"https:\/\/kinqsta.com\/de\/blog\/arten-von-entwicklern\/\">React-Entwicklerinnen und -Entwickler<\/a> sto\u00dfen k\u00f6nnen, ist der Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;.<\/p>\n<p>In diesem Artikel gehen wir auf die Details dieses Fehlers ein, erkl\u00e4ren, warum er auftritt, und zeigen, wie man ihn beheben kann.<\/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>Was ist die Ursache f\u00fcr den Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook Funktion aufgerufen werden&#8220;?<\/h2>\n<p>Bei der Verwendung von React Hooks gibt es bestimmte Regeln. Viele React-Entwicklerinnen und -Entwickler \u00fcbergehen diese Regeln beim Erlernen von React, was zu Fehlern f\u00fchrt. Einer dieser Fehler lautet: &#8222;React Hooks m\u00fcssen in einer React Function-Komponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;.<\/p>\n<p>Dieser Fehler tritt auf, wenn zwei wichtige Dinge passieren:<\/p>\n<ul>\n<li>Verwendung von React Hooks in Klassenkomponenten<\/li>\n<li>Aufrufen von React Hooks innerhalb einer verschachtelten Funktion<\/li>\n<\/ul>\n<p>React Hooks, wie <code>useState<\/code>, <code>useEffect<\/code> und <code>useContext<\/code>, sind daf\u00fcr gedacht, auf der obersten Ebene einer funktionalen Komponente oder einer benutzerdefinierten Hook-Funktion aufgerufen zu werden. Au\u00dferdem sollten sie nur in funktionalen Komponenten und nicht in Klassenkomponenten aufgerufen werden. Dies sind zwei wichtige Regeln von <a href=\"https:\/\/kinqsta.com\/de\/blog\/react-hook-useeffect-has-a-missing-dependency\/\">React Hooks<\/a>, die sicherstellen, dass Hooks in React-Komponenten korrekt und konsistent verwendet werden.<\/p>\n<p>Wenn Hooks an ung\u00fcltigen Stellen aufgerufen werden, erh\u00e4ltst du diese Fehlermeldung: &#8222;React Hooks m\u00fcssen in einer React Function-Komponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;. Dieser ESLint-Fehler soll verhindern, dass Hooks auf eine Weise verwendet werden, die zu unerwartetem Verhalten und Fehlern in deiner <a href=\"https:\/\/kinqsta.com\/de\/blog\/chatgpt-klon\/\">React-Anwendung<\/a> f\u00fchren kann.<\/p>\n\n<h2>2 M\u00f6glichkeiten, den Fehler &#8222;React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden&#8220; zu beheben<\/h2>\n<p>Dieser Fehler kann auf verschiedene Arten behoben werden, je nachdem, wie du den React Hook missbr\u00e4uchlich verwendet hast.<\/p>\n<h3>1. React Hooks niemals in Klassenkomponenten aufrufen<\/h3>\n<p>Hooks sind nur f\u00fcr funktionale <a href=\"https:\/\/kinqsta.com\/de\/blog\/web-komponenten\/\">Komponenten<\/a> oder benutzerdefinierte Hooks gedacht &#8211; denn sie nutzen den Call Stack der funktionalen Komponenten, um den Zustand und den Lebenszyklus der Komponente zu verwalten. Klassenkomponenten verf\u00fcgen nicht \u00fcber diesen Call Stack, daher kannst du Hooks nicht direkt in ihnen verwenden.<\/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>Wenn du das tust, bekommst du diesen Fehler:<\/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=\"Fehler in der React-Funktion\" width=\"1600\" height=\"125\"><figcaption class=\"wp-caption-text\">Fehler in der React-Funktion<\/figcaption><\/figure>\n<p>Es gibt jedoch einige M\u00f6glichkeiten, dies zu beheben, je nachdem, was du bevorzugst. Du kannst dich entscheiden, <code>state<\/code> und <code>setState<\/code> mit Klassenkomponenten zu verwenden, die Komponente in eine funktionale Komponente umzuwandeln oder eine Higher-Order Component (HOC) zu verwenden.<\/p>\n<h4>A. Die Klassenkomponente in eine funktionale Komponente umwandeln<\/h4>\n<p>Hooks k\u00f6nnen nur dann funktionieren, wenn du eine funktionale Komponente verwendest. Das liegt daran, dass Hooks f\u00fcr die Arbeit mit funktionalen Komponenten konzipiert sind.<\/p>\n<p>Im folgenden Beispiel wird die vorherige Klassenkomponente in eine funktionale Komponente umgewandelt:<\/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. Eine \u00fcbergeordnete Komponente (HOC) verwenden<\/h4>\n<p>Eine M\u00f6glichkeit, Hooks in einer Klassenkomponente zu verwenden, ist die Verwendung einer Higher-Order Component (HOC).<\/p>\n<p>Eine HOC ist eine Funktion, die eine Komponente nimmt und eine neue Komponente mit zus\u00e4tzlichen Eigenschaften oder Funktionen zur\u00fcckgibt. Hier ist ein Beispiel daf\u00fcr, wie du eine HOC verwenden kannst, um einer Klassenkomponente Hooks zu geben:<\/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. Zust\u00e4nde in einer Klassenkomponente verwenden<\/h4>\n<p>Angenommen, du willst die Syntax deiner Komponente nicht \u00e4ndern. Du kannst dich entscheiden, <code>state<\/code> und <code>setState<\/code> anstelle des useState Hooks zu verwenden:<\/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. Niemals React Hooks innerhalb einer verschachtelten Funktion aufrufen<\/h3>\n<p>Eine klare Regel f\u00fcr React Hooks ist, dass alle Hooks auf der obersten Ebene einer funktionalen Komponente oder einer eigenen Hook-Funktion aufgerufen werden sollten. Wenn du eine Hook innerhalb einer verschachtelten Funktion aufrufst, hast du gegen diese Regel versto\u00dfen.<\/p>\n<p>Im folgenden Beispiel wird der <code>useState<\/code> Hook in der Funktion <code>handleClick<\/code> aufgerufen:<\/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>Dadurch wird der folgende Fehler ausgel\u00f6st:<\/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=\"Ein weiterer React-Fehler\" width=\"1600\" height=\"149\"><figcaption class=\"wp-caption-text\">Ein weiterer React-Fehler<\/figcaption><\/figure>\n<p>Du kannst das Problem beheben, indem du den Hook au\u00dferhalb der Funktion verschiebst &#8211; auf die oberste Ebene deiner Funktionskomponente:<\/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>Zusammenfassung<\/h2>\n<p>In diesem Artikel hast du erfahren, was den Fehler &#8222;React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden&#8220; verursacht und wie er behoben werden kann.<\/p>\n<p>Befolge immer die Regeln f\u00fcr React Hooks, wenn du mit ihnen arbeitest und sie in deinen React-Projekten verwendest, um Fehler wie diesen zu vermeiden.<\/p>\n<p>Du suchst nach der idealen Hosting-L\u00f6sung f\u00fcr deine React-Anwendungen? Teste das Anwendungs-Hosting von Kinsta <a href=\"https:\/\/sevalla.com\/application-hosting\/\">kostenlos<\/a>!<\/p>\n<p><em>Wir wollen von dir h\u00f6ren! Hast du diesen Fehler schon einmal erlebt? Wenn ja, wie hast du ihn behoben? Hast du eine andere L\u00f6sung gefunden, die nicht in diesem Artikel beschrieben wurde? Teile uns deine Meinung in den Kommentaren unten mit!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Hooks haben die Art und Weise, wie wir funktionale Komponenten in React schreiben, revolutioniert und bieten eine \u00fcbersichtliche und leistungsstarke M\u00f6glichkeit, Zust\u00e4nde und Seiteneffekte zu &#8230;<\/p>\n","protected":false},"author":287,"featured_media":62483,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[975,977],"class_list":["post-62482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-react-fehler"],"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>So beheben Sie den Fehler &quot;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&quot; - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler &quot;React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden&quot; beheben kannst.\" \/>\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\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"So beheben Sie den Fehler &quot;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&quot;\" \/>\n<meta property=\"og:description\" content=\"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler &quot;React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden&quot; beheben kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-02T06:22:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:15:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler &quot;React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden&quot; beheben kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"So beheben Sie den Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;\",\"datePublished\":\"2023-06-02T06:22:07+00:00\",\"dateModified\":\"2025-10-01T19:15:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\"},\"wordCount\":873,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\",\"name\":\"So beheben Sie den Fehler \\\"React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden\\\" - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"datePublished\":\"2023-06-02T06:22:07+00:00\",\"dateModified\":\"2025-10-01T19:15:47+00:00\",\"description\":\"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler \\\"React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden\\\" beheben kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React-Fehler\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/react-fehler\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"So beheben Sie den Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"So beheben Sie den Fehler \"React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden\" - Kinsta\u00ae","description":"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler \"React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden\" beheben kannst.","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\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/","og_locale":"de_DE","og_type":"article","og_title":"So beheben Sie den Fehler \"React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden\"","og_description":"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler \"React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden\" beheben kannst.","og_url":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-06-02T06:22:07+00:00","article_modified_time":"2025-10-01T19:15:47+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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":"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler \"React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden\" beheben kannst.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"So beheben Sie den Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;","datePublished":"2023-06-02T06:22:07+00:00","dateModified":"2025-10-01T19:15:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/"},"wordCount":873,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/","url":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/","name":"So beheben Sie den Fehler \"React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden\" - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","datePublished":"2023-06-02T06:22:07+00:00","dateModified":"2025-10-01T19:15:47+00:00","description":"In unserem Leitfaden erf\u00e4hrst du, wie du den Fehler \"React Hooks m\u00fcssen in einer React-Funktionskomponente oder einer benutzerdefinierten React-Hook-Funktion aufgerufen werden\" beheben kannst.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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\/de\/blog\/react-hooks-muessen-in-einer-react-funktionskomponente-oder-einer-benutzerdefinierten-react-hook-funktion-aufgerufen-werden\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React-Fehler","item":"https:\/\/kinqsta.com\/de\/thema\/react-fehler\/"},{"@type":"ListItem","position":3,"name":"So beheben Sie den Fehler &#8222;React Hooks m\u00fcssen in einer React Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden&#8220;"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/62482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=62482"}],"version-history":[{"count":5,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/62482\/revisions"}],"predecessor-version":[{"id":62624,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/62482\/revisions\/62624"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/translations\/es"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62482\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/62483"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=62482"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=62482"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=62482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}