{"id":52982,"date":"2023-06-02T08:21:56","date_gmt":"2023-06-02T06:21:56","guid":{"rendered":"https:\/\/kinqsta.com\/nl\/?p=52982&#038;post_type=knowledgebase&#038;preview_id=52982"},"modified":"2025-10-01T21:44:05","modified_gmt":"2025-10-01T19:44:05","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\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","title":{"rendered":"Zo repareer je de fout &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;"},"content":{"rendered":"<p>React Hooks hebben een revolutie teweeggebracht in de manier waarop we function components in <a href=\"https:\/\/kinqsta.com\/blog\/what-is-react-js\/\">React<\/a> schrijven, en bieden een beknopte en krachtige manier om state en side effects te beheren.<\/p>\n<p>Maar zoals met elke nieuwe functie, komt het met zijn eigen set regels en richtlijnen. Een veel voorkomende fout die React <a href=\"https:\/\/kinqsta.com\/nl\/blog\/soorten-developers\/\">developers<\/a> kunnen tegenkomen is de &#8220;React hooks must be called in a React function component or a custom React hook function&#8221; fout.<\/p>\n<p>In dit artikel duiken we in de details van deze fout, begrijpen we waarom hij optreedt, en geven we best practices om hem op te lossen.<\/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>De oorzaak van de &#8220;React hooks must be called in a React function component or a custom React hook function&#8221; fout<\/h2>\n<p>Er zijn regels verbonden aan het gebruik van React hooks. Toch zijn er veel React developers die het hier niet zo nauw mee nemen bij het leren van React, wat leidt tot fouten. Een van deze fouten is &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;.<\/p>\n<p>Deze fout treedt op doordat er twee belangrijke dingen gebeuren:<\/p>\n<ul>\n<li>React Hooks gebruiken in class components<\/li>\n<li>Het callen van React hooks binnen een nested functie<\/li>\n<\/ul>\n<p>React hooks, zoals <code>useState<\/code>, <code>useEffect<\/code>, en <code>useContext<\/code>, zijn ontworpen om gecalld te worden op het hoogste niveau van een function component of een custom hook functie. Ze mogen ook alleen worden gecalld in function components en niet in class components. Dit zijn twee belangrijke regels rond <a href=\"https:\/\/kinqsta.com\/nl\/blog\/react-hook-useeffect-has-a-missing-dependency\/\">React hooks<\/a>, die ervoor zorgen dat hooks correct en consistent worden gebruikt in React components.<\/p>\n<p>Als Hooks op ongeldige plaatsen worden gecalld, krijg je deze foutmelding: &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;. Deze ESLint fout is als een beveiliging om te voorkomen dat hooks worden gebruikt op manieren die onverwacht gedrag en bugs in je <a href=\"https:\/\/kinqsta.com\/nl\/blog\/chatgpt-kloon\/\">React applicatie<\/a> kunnen veroorzaken.<\/p>\n\n<h2>2 manieren om de &#8220;React hooks must be called in a React function component or a custom React hook function&#8221; fout op te lossen<\/h2>\n<p>Deze fout kan op een paar manieren worden opgelost, afhankelijk van de situatie of hoe je de React hook verkeerd hebt gebruikt.<\/p>\n<h3>1. Call React hooks nooit in class compoments<\/h3>\n<p>Hooks zijn ontworpen om alleen te werken met function <a href=\"https:\/\/kinqsta.com\/nl\/blog\/web-components\/\">components<\/a> of custom hooks &#8211; omdat ze de call stack van de function components gebruiken om de state en levenscyclus van de component te beheren. Class components hebben deze call stack niet, dus je kunt hooks er niet rechtstreeks in gebruiken.<\/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>Doe je dat wel, dan krijg je deze foutmelding:<\/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\">Fout<\/figcaption><\/figure>\n<p>Er zijn echter een paar manieren om dit op te lossen, afhankelijk van je voorkeur. Je kunt besluiten <code>state<\/code> en <code>setState<\/code> te gebruiken met class components, de component omzetten in een function component, of een Higher-Order Component (HOC) gebruiken.<\/p>\n<h4>A. Zet de class component om in een function component<\/h4>\n<p>De enige manier waarop hooks kunnen werken is wanneer je een function component gebruikt. Dit komt omdat hooks ontworpen zijn om te werken met function components.<\/p>\n<p>In het onderstaande voorbeeld wordt de vorige class component omgezet in een function component:<\/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. Gebruik een Higher-Order Component (HOC)<\/h4>\n<p>Een manier om hooks te gebruiken in een class component is het gebruik van een Higher-Order Component (HOC).<\/p>\n<p>HOC is een functie die een component neemt en een nieuwe component teruggeeft met extra props of functionaliteit. Hier is een voorbeeld van hoe je een HOC kunt gebruiken om hooks aan een class component te geven:<\/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. Gebruik state\u00a0 in een class component<\/h4>\n<p>Stel dat je de syntaxis van je component niet wilt veranderen. Dan zou je kunnen besluiten om\u00a0 <code>state<\/code> en <code>setState<\/code> te gebruiken in plaats van 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. Call React hooks nooit binnen een nested functie<\/h3>\n<p>Een duidelijke regel van React Hooks is dat alle hooks moeten worden gecalld op het hoogste niveau van een function component of een custom hook functie. Als je een hook dus callt binnen een nested functie, heb je deze regel overtreden.<\/p>\n<p>In het onderstaande voorbeeld wordt de <code>useState<\/code> Hook gecalld in de <code>handleClick<\/code> functie:<\/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>Dit gooit de volgende fout:<\/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=\"Nog een React error\" width=\"1600\" height=\"149\"><figcaption class=\"wp-caption-text\">Voorbeeld fout<\/figcaption><\/figure>\n<p>Je kunt dit oplossen door de hook buiten de functie te verplaatsen &#8211; naar het hoogste niveau van je function component:<\/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>Samenvatting<\/h2>\n<p>In dit artikel heb je geleerd wat de oorzaak is van de fout &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;, en hoe die kan worden opgelost.<\/p>\n<p>Volg altijd de regels van React hooks bij het werken en gebruiken ervan in je React projecten om te voorkomen dat je fouten als deze ervaart.<\/p>\n<p>Op zoek naar de ideale hostingoplossing voor je React applicaties? Test Kinsta&#8217;s Applicatie Hosting <a href=\"https:\/\/sevalla.com\/application-hosting\/\">gratis uit<\/a>!<\/p>\n<p><em>We horen graag van je! Heb je deze fout ooit eerder meegemaakt? Zo ja, hoe heb je het opgelost? Heb je een andere aanpak gebruikt die niet in dit artikel is behandeld? Deel je gedachten in de comments hieronder!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Hooks hebben een revolutie teweeggebracht in de manier waarop we function components in React schrijven, en bieden een beknopte en krachtige manier om state en &#8230;<\/p>\n","protected":false},"author":287,"featured_media":52983,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871,908],"class_list":["post-52982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-react-fouten"],"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>Zo repareer je de fout &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=\"Leer hoe je de fout &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; oplost met onze gids.\" \/>\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\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo repareer je de fout &quot;React hooks must be called in a React function component or a custom React hook function&quot;\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je de fout &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; oplost met onze gids.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/nl\/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-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-02T06:21:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:44:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Leer hoe je de fout &quot;React Hooks Must Be Called In a React Function Component or a Custom React Hook Function&quot; oplost met onze gids.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo repareer je de fout &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;\",\"datePublished\":\"2023-06-02T06:21:56+00:00\",\"dateModified\":\"2025-10-01T19:44:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"},\"wordCount\":907,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\",\"name\":\"Zo repareer je de fout \\\"React hooks must be called in a React function component or a custom React hook function\\\" - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"datePublished\":\"2023-06-02T06:21:56+00:00\",\"dateModified\":\"2025-10-01T19:44:05+00:00\",\"description\":\"Leer hoe je de fout \\\"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\\\" oplost met onze gids.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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\/nl\/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\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React fouten\",\"item\":\"https:\/\/kinqsta.com\/nl\/onderwerpen\/react-fouten\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo repareer je de fout &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo repareer je de fout \"React hooks must be called in a React function component or a custom React hook function\" - Kinsta\u00ae","description":"Leer hoe je de fout \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" oplost met onze gids.","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\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo repareer je de fout \"React hooks must be called in a React function component or a custom React hook function\"","og_description":"Leer hoe je de fout \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" oplost met onze gids.","og_url":"https:\/\/kinqsta.com\/nl\/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-Nederland-476213452787823\/","article_published_time":"2023-06-02T06:21:56+00:00","article_modified_time":"2025-10-01T19:44:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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":"Leer hoe je de fout \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" oplost met onze gids.","twitter_image":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo repareer je de fout &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;","datePublished":"2023-06-02T06:21:56+00:00","dateModified":"2025-10-01T19:44:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"},"wordCount":907,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","url":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/","name":"Zo repareer je de fout \"React hooks must be called in a React function component or a custom React hook function\" - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","datePublished":"2023-06-02T06:21:56+00:00","dateModified":"2025-10-01T19:44:05+00:00","description":"Leer hoe je de fout \"React Hooks Must Be Called In a React Function Component or a Custom React Hook Function\" oplost met onze gids.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function\/#primaryimage","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/react-hooks-must-be-called-in-a-react-function-component-or-a-custom-react-hook-function.jpg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/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\/nl\/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\/nl\/"},{"@type":"ListItem","position":2,"name":"React fouten","item":"https:\/\/kinqsta.com\/nl\/onderwerpen\/react-fouten\/"},{"@type":"ListItem","position":3,"name":"Zo repareer je de fout &#8220;React hooks must be called in a React function component or a custom React hook function&#8221;"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/nl\/#website","url":"https:\/\/kinqsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/52982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/comments?post=52982"}],"version-history":[{"count":5,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/52982\/revisions"}],"predecessor-version":[{"id":53781,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/52982\/revisions\/53781"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/translations\/es"},{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52982\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media\/52983"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media?parent=52982"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/tags?post=52982"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/topic?post=52982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}