{"id":53188,"date":"2023-06-13T11:20:14","date_gmt":"2023-06-13T09:20:14","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=53188&#038;post_type=knowledgebase&#038;preview_id=53188"},"modified":"2025-10-01T21:43:49","modified_gmt":"2025-10-01T19:43:49","slug":"usestate-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/","title":{"rendered":"Aan de slag met de useState Hook in React"},"content":{"rendered":"<p>React is een populaire <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">JavaScript bibliotheek<\/a> die wordt gebruikt voor het bouwen van gebruikersinterfaces. Het biedt <a href=\"https:\/\/kinsta.com\/nl\/blog\/soorten-developers\/\">developers<\/a> een breed scala aan hulpmiddelen, waaronder Hooks, om het bouwen van applicaties eenvoudiger en effici\u00ebnter te maken.<\/p>\n<p>Een van de meest gebruikte Hooks is <code>useState<\/code>, waarmee developers status kunnen toevoegen aan functional components.<\/p>\n<p>In dit artikel gaan we dieper in op <code>useState<\/code>, het gebruik en de best practices voor de implementatie ervan.<\/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>Wat is de useState Hook?<\/h2>\n<p>Voordat we in de details van <code>useState<\/code> duiken, laten we eerst defini\u00ebren wat Hooks zijn en hoe ze verschillen van traditionele class components.<\/p>\n<p>Een Hook is een functie waarmee je state en andere <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> functies kunt gebruiken in functional components.<\/p>\n<p>In tegenstelling tot class components hebben functional components geen ingebouwde manier om state op te slaan. Hooks zoals <code>useState<\/code> lossen dit probleem op door je in staat te stellen om state toe te voegen aan functional components.<\/p>\n\n<h3>Achtergrond van de useState Hook<\/h3>\n<p>V\u00f3\u00f3r de introductie van de <code>useState<\/code> Hook in React 16.8 konden functional components hun eigen state niet opslaan. In plaats daarvan moesten developers class components of externe bibliotheken voor statebeheer zoals Redux gebruiken om de state in hun applicaties te beheren.<\/p>\n<p>Hoewel class components en externe bibliotheken voor statebeheer nog steeds haalbare opties zijn, maakte de introductie van de <code>useState<\/code> Hook het veel eenvoudiger voor developers om state toe te voegen aan hun functional components en vereenvoudigde het de React <a href=\"https:\/\/kinsta.com\/nl\/blog\/rest-api-vs-web-api\/\">API<\/a> in het algemeen.<\/p>\n<p>Met de <code>useState<\/code> Hook kunnen devs nu functional components gebruiken voor de meeste use cases, waardoor er minder boilerplate code nodig is en het eenvoudiger wordt om de state in hun applicaties te beoordelen.<\/p>\n<h3>Onderdelen van de useState syntaxis<\/h3>\n<p>De <code>useState<\/code> Hook neemt een initi\u00eble state waarde als argument en retourneert een array met twee elementen: de huidige state waarde en een functie die de state waarde bijwerkt.<\/p>\n<p>Hier is de syntaxis:<\/p>\n<pre><code class=\"language-jsx\">const [state, setState] = useState(initialState);<\/code><\/pre>\n<ul>\n<li><code>state<\/code>: De huidige state waarde.<\/li>\n<li><code>setState<\/code>: Een functie die de state waarde bijwerkt.<\/li>\n<li><code>initialState<\/code>: De beginwaarde van de state variabele die wordt gedeclared. Dit is optioneel. Als er geen waarde wordt opgegeven (niet aan te raden), wordt deze automatisch ingesteld op <code>undefined<\/code>.<\/li>\n<\/ul>\n<p>Het is belangrijk op te merken dat als je de <code>useState<\/code> Hook gebruikt, React je component automatisch opnieuw zal weergeven als de waarde van de state verandert.<\/p>\n<h2>Zo gebruik je de useState Hook<\/h2>\n<p>Om <code>useState<\/code> te implementeren, call je de functie en geef je een initi\u00eble waarde door als argument. De functie retourneert een array met de huidige state waarde en een functie om de state bij te werken.<\/p>\n<p>Hier is een voorbeeld van het gebruik van <code>useState<\/code> om een eenvoudige teller te beheren:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;You clicked {count} times&lt;\/p&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;\n        Click me\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default Counter;<\/code><\/pre>\n<p>In dit voorbeeld initialiseren we de status <code>count<\/code> op 0 met de <code>useState<\/code> Hook. Vervolgens geven we de huidige telwaarde en een knop weer. Als er op de knop wordt geklikt, wordt de tellerwaarde verhoogd omdat we een arrow functie hebben toegevoegd met de <code>setCount<\/code> functie.<\/p>\n<pre><code class=\"language-jsx\">&lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;\/button&gt;<\/code><\/pre>\n<p>Als je de <code>useState<\/code> Hook gebruikt, is het belangrijk dat je deze importeert uit de React bibliotheek. Als je het vergeet te importeren, loop je waarschijnlijk tegen fouten aan als je de hook probeert te gebruiken. Zo importeer je useState:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';<\/code><\/pre>\n<p>Door <code>useState<\/code> op te nemen in het import statement, vertel je React dat je de <code>useState<\/code> hook wilt gebruiken in je component.<\/p>\n<h2>Verschillende gegevenstypen gebruiken met de useState Hook in React<\/h2>\n<p>De <code>useState<\/code> Hook in React is niet beperkt tot het beheren van alleen string- of numerieke gegevenstypen. Je kunt het ook gebruiken om toestanden voor verschillende gegevenstypen te beheren, zoals arrays, objecten en booleans.<\/p>\n<h3>Arrays gebruiken met de useState Hook<\/h3>\n<p>Je kunt de <code>useState<\/code> Hook gebruiken om een array te beheren in React. Als je bijvoorbeeld een array van vruchten hebt, kun je je state initialiseren met de array:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction App() {\n  const [list, setList] = useState(['apple', 'banana', 'orange']);\n\n  const addToList = () =&gt; {\n    const newItem = 'grape';\n    setList([...list, newItem]);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;ul&gt;\n        {list.map((item) =&gt; (\n          &lt;li key={item}&gt;{item}&lt;\/li&gt;\n        ))}\n      &lt;\/ul&gt;\n      &lt;button onClick={addToList}&gt;Add Item&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>In dit voorbeeld gebruiken we <code>useState<\/code> om een array met de naam <code>list<\/code> te beheren. De initi\u00eble status van <code>list<\/code> is ingesteld op een array met drie items &#8211; <strong>apple<\/strong>, <b>banana <\/b>en <strong>orange<\/strong>.<\/p>\n<p>We hebben ook een functie <code>addToList<\/code> gemaakt die alle array-items kopieert met de spread operator (<code>...<\/code>) en vervolgens een nieuw item <strong>druif<\/strong> toevoegt aan de array <code>list<\/code> wanneer op de knop &#8220;Item toevoegen&#8221; wordt geklikt.<\/p>\n<p>Deze keer werken we de status niet inline bij met behulp van een pijlfunctie, omdat het gepaster is om deze bewerking te maken als een zelfstandige functie en deze aan te roepen via de methode <code>onClick<\/code> die is toegevoegd aan de knop <strong>Item toevoegen<\/strong>.<\/p>\n<h3>Objecten gebruiken met de useState Hook<\/h3>\n<p>Je kunt de <code>useState<\/code> Hook ook gebruiken om een object in React te beheren. Hier is een voorbeeld:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction App() {\n  const [user, setUser] = useState({ name: 'John', age: 30 });\n\n  const handleClick = () =&gt; {\n    setUser({ ...user, age: user.age + 1 });\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Name: {user.name}&lt;\/p&gt;\n      &lt;p&gt;Age: {user.age}&lt;\/p&gt;\n      &lt;button onClick={handleClick}&gt;Increase Age&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>In dit voorbeeld gebruiken we <code>useState<\/code> om een object met de naam user te beheren. De initi\u00eble status van <code>user<\/code> is ingesteld op een object met twee properties &#8211; <strong>name<\/strong>\u00a0en <strong>age<\/strong>.<\/p>\n<p>We hebben ook een functie <code>handleClick<\/code> die alle objectgegevens kopieert met de spread operator (<code>...<\/code>) en ook de leeftijd van de gebruiker met <strong>1<\/strong> verhoogt wanneer op de knop <strong>Increase Age <\/strong>wordt geklikt.<\/p>\n<p>Het is belangrijk om te weten dat je dit object kunt toewijzen aan een variabele en vervolgens de variabele kunt initialiseren. Dit is handig als je een groot object of array hebt en eenvoudig te begrijpen code wilt schrijven:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\/\/ Declare data\nlet userData = {\n    name: 'John',\n    age: 30,\n};\n\nfunction App() {\n    const [user, setUser] = useState(userData);\n\n    const handleClick = () =&gt; {\n        setUser({ ...user, age: user.age + 1 });\n    };\n\n    return (\n        &lt;div&gt;\n            &lt;p&gt;Name: {user.name}&lt;\/p&gt;\n            &lt;p&gt;Age: {user.age}&lt;\/p&gt;\n            &lt;button onClick={handleClick}&gt;Increase Age&lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n}\n\nexport default App;<\/code><\/pre>\n<h3>Booleans gebruiken met de useState Hook<\/h3>\n<p>Je kunt de <code>useState<\/code> Hook ook gebruiken om een booleaanse waarde te beheren in React. Hier is een voorbeeld:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nfunction App() {\n  const [isOn, setIsOn] = useState(false);\n\n  const toggleSwitch = () =&gt; {\n    setIsOn(!isOn);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;The switch is {isOn ? 'on' : 'off'}&lt;\/p&gt;\n      &lt;button onClick={toggleSwitch}&gt;Toggle Switch&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>In dit voorbeeld gebruiken we <code>useState<\/code> om een booleaanse waarde met de naam <code>isOn<\/code> te beheren. De initi\u00eble status van <code>isOn<\/code> is ingesteld op <code>false<\/code>. We hebben ook een functie <code>toggleSwitch<\/code> die de waarde van <code>isOn<\/code> omwisselt wanneer op de knop <strong>Toggle Switch<\/strong> wordt geklikt.<\/p>\n<p>Deze functie kan worden gebruikt om het schakelen tussen donkere en lichte modi in je projecten te beheren.<\/p>\n<p>Laten we, voordat we afsluiten, een geavanceerdere use case van de <code>useState<\/code> Hook met formulieren verkennen.<\/p>\n<h2>De useState Hook en formulieren<\/h2>\n<p>Om formuliergegevens en gebruikersinvoer in React af te handelen, gebruik je state. Deze wordt gebruikt om de huidige waarden van de formulierelementen bij te houden. Het houdt alle gebruikersinteracties bij, zoals het intypen van een tekstinvoer of het selecteren van een optie uit een dropdown, en werkt uiteindelijk de state bij met de nieuwe waarde.<\/p>\n<p>Hier is een voorbeeld van het gebruik van <code>useState<\/code> om een eenvoudig formulier te maken:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\nlet formStateData = {\n    firstName: '',\n    lastName: '',\n    email: '',\n};\n\nfunction Form() {\n    const [formData, setFormData] = useState(formStateData);\n\n    const handleInputChange = (event) =&gt; {\n        const { name, value } = event.target;\n        setFormData({ ...formData, [name]: value });\n    };\n\n    const handleSubmit = (event) =&gt; {\n        event.preventDefault();\n        console.log(formData);\n    };\n\n    return (\n        &lt;form onSubmit={handleSubmit}&gt;\n            &lt;input\n                type=\"text\"\n                name=\"firstName\"\n                value={formData.firstName}\n                onChange={handleInputChange}\n            \/&gt;\n            &lt;input\n                type=\"text\"\n                name=\"lastName\"\n                value={formData.lastName}\n                onChange={handleInputChange}\n            \/&gt;\n            &lt;input\n                type=\"email\"\n                name=\"email\"\n                value={formData.email}\n                onChange={handleInputChange}\n            \/&gt;\n            &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\n        &lt;\/form&gt;\n    );\n}\n\nexport default Form;<\/code><\/pre>\n<p>In dit voorbeeld maken we eerst een object voor de gegevens die worden verzameld met het formulier met standaardwaarden voor de velden <strong>firstName<\/strong>, <b>lastName <\/b>en <strong>email<\/strong>. Vervolgens initialiseren we de status <code>formData<\/code> met <code>useState<\/code>.<\/p>\n<pre><code class=\"language-jsx\">let formStateData = {\n    firstName: '',\n    lastName: '',\n    email: '',\n};\n\nconst [formData, setFormData] = useState(formStateData);<\/code><\/pre>\n<p>Vervolgens defini\u00ebren we een <code>handleInputChange<\/code> functie die de <code>formData<\/code> state bijwerkt wanneer een formulierveld wordt gewijzigd.<\/p>\n<pre><code class=\"language-jsx\">const handleInputChange = (event) =&gt; {\n    const { name, value } = event.target;\n    setFormData({ ...formData, [name]: value });\n};<\/code><\/pre>\n<p>Tenslotte defini\u00ebren we een <code>handleSubmit<\/code> functie die de huidige formuliergegevens naar de console logt als het formulier wordt verzonden.<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (event) =&gt; {\n    event.preventDefault();\n    console.log(formData);\n};<\/code><\/pre>\n<h2>Best practices useState<\/h2>\n<p>Bij het gebruik van de <code>useState<\/code> Hook is het belangrijk om best practices te volgen om veelgemaakte fouten te vermijden en optimale prestaties te garanderen. Hier zijn een paar tips om in gedachten te houden:<\/p>\n<ul>\n<li><strong>Vermijd deep nested state<\/strong>: In plaats van complexe state data op te slaan in een enkel object, kun je overwegen om het op te splitsen in kleinere stukken zodat het gemakkelijker te beheren is.<\/li>\n<li><strong>Gebruik functional updates<\/strong>: Gebruik bij het bijwerken van de state op basis van de vorige state funcational updates om race-condities te voorkomen en ervoor te zorgen dat de juiste state wordt bijgewerkt.<\/li>\n<li><strong>Vermijd overmatige state updates<\/strong>: Het bijwerken van state kan veel resources kosten, dus probeer het aantal updates dat je doet te minimaliseren. Overweeg het gebruik van de <code>useEffect<\/code> Hook om updates in batches uit te voeren en de prestaties te optimaliseren.<\/li>\n<li><strong>Vermijd onnodige re-renders<\/strong>: React zal een component opnieuw renderen wanneer de state of props veranderen. Gebruik de memo functie om onnodige re-renders te voorkomen.<\/li>\n<\/ul>\n\n<h2>Samenvatting<\/h2>\n<p>In dit artikel hebben we de <code>useState<\/code> Hook uitgediept en geleerd hoe je deze kunt gebruiken om state toe te voegen aan functional components. We hebben ook besproken hoe je <code>useState<\/code> kunt gebruiken met formulieren, arrays en objecten, en we hebben best practices besproken voor optimale prestaties. Door deze best practices te volgen, kun je ervoor zorgen dat je React applicaties effici\u00ebnt, schaalbaar en eenvoudig te onderhouden zijn.<\/p>\n<p>Op zoek naar de ideale hostingoplossing voor je React applicaties? Probeer <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta&#8217;s Applicatie Hosting<\/a> gratis uit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is een populaire JavaScript bibliotheek die wordt gebruikt voor het bouwen van gebruikersinterfaces. Het biedt developers een breed scala aan hulpmiddelen, waaronder Hooks, om het &#8230;<\/p>\n","protected":false},"author":287,"featured_media":53189,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871],"class_list":["post-53188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aan de slag met de useState Hook in React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aan de slag met de useState Hook in React\" \/>\n<meta property=\"og:description\" content=\"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\" \/>\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-13T09:20:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:43:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.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=\"8 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Aan de slag met de useState Hook in React\",\"datePublished\":\"2023-06-13T09:20:14+00:00\",\"dateModified\":\"2025-10-01T19:43:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\"},\"wordCount\":1384,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\",\"name\":\"Aan de slag met de useState Hook in React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg\",\"datePublished\":\"2023-06-13T09:20:14+00:00\",\"dateModified\":\"2025-10-01T19:43:49+00:00\",\"description\":\"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Aan de slag met de useState Hook in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Aan de slag met de useState Hook in React - Kinsta\u00ae","description":"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/","og_locale":"nl_NL","og_type":"article","og_title":"Aan de slag met de useState Hook in React","og_description":"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!","og_url":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-06-13T09:20:14+00:00","article_modified_time":"2025-10-01T19:43:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"8 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Aan de slag met de useState Hook in React","datePublished":"2023-06-13T09:20:14+00:00","dateModified":"2025-10-01T19:43:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/"},"wordCount":1384,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/","url":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/","name":"Aan de slag met de useState Hook in React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg","datePublished":"2023-06-13T09:20:14+00:00","dateModified":"2025-10-01T19:43:49+00:00","description":"Supercharge je React app met useState Hook! Onze beginnersvriendelijke gids behandelt alles wat je moet weten over het beheren van state binnen functies!","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/usestate-react\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/usestate-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/"},{"@type":"ListItem","position":3,"name":"Aan de slag met de useState Hook in React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=53188"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53188\/revisions"}],"predecessor-version":[{"id":53277,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53188\/revisions\/53277"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53188\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/53189"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=53188"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=53188"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=53188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}