{"id":62805,"date":"2023-06-13T10:20:06","date_gmt":"2023-06-13T09:20:06","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=62805&#038;post_type=knowledgebase&#038;preview_id=62805"},"modified":"2025-10-01T20:15:35","modified_gmt":"2025-10-01T19:15:35","slug":"usestate-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/","title":{"rendered":"Erste Schritte mit dem useState Hook in React"},"content":{"rendered":"<p>React ist eine beliebte <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Bibliothek<\/a>, die f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen verwendet wird. Sie bietet <a href=\"https:\/\/kinsta.com\/de\/blog\/arten-von-entwicklern\/\">Entwicklern<\/a> eine Vielzahl von Werkzeugen, darunter Hooks, die das Erstellen von Anwendungen einfacher und effizienter machen.<\/p>\n<p>Einer der am h\u00e4ufigsten verwendeten Hooks ist <code>useState<\/code>, mit dem Entwickler funktionalen Komponenten Zust\u00e4nde hinzuf\u00fcgen k\u00f6nnen.<\/p>\n<p>In diesem Artikel werfen wir einen detaillierten Blick auf <code>useState<\/code>, seine Einsatzm\u00f6glichkeiten und die besten Praktiken f\u00fcr seine Implementierung.<\/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 der useState Hook?<\/h2>\n<p>Bevor wir uns mit den Besonderheiten von <code>useState<\/code> befassen, wollen wir zun\u00e4chst definieren, was Hooks sind und wie sie sich von herk\u00f6mmlichen Klassenkomponenten unterscheiden.<\/p>\n<p>Ein Hook ist eine Funktion, mit der du den Status und andere <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a>-Funktionen in funktionalen Komponenten nutzen kannst.<\/p>\n<p>Im Gegensatz zu Klassenkomponenten verf\u00fcgen funktionale Komponenten nicht \u00fcber eine eingebaute M\u00f6glichkeit, den Status zu speichern. Hooks wie <code>useState<\/code> l\u00f6sen dieses Problem, indem sie es dir erm\u00f6glichen, Zust\u00e4nde zu funktionalen Komponenten hinzuzuf\u00fcgen.<\/p>\n\n<h3>Hintergrund des useState Hooks<\/h3>\n<p>Vor der Einf\u00fchrung des <code>useState<\/code> Hooks in React 16.8 war es funktionalen Komponenten nicht m\u00f6glich, ihren eigenen Status zu speichern. Stattdessen mussten Entwicklerinnen und Entwickler Klassenkomponenten oder externe Zustandsverwaltungsbibliotheken wie Redux verwenden, um den Zustand in ihren Anwendungen zu verwalten.<\/p>\n<p>Obwohl Klassenkomponenten und externe Bibliotheken f\u00fcr die Zustandsverwaltung immer noch praktikable Optionen sind, hat die Einf\u00fchrung des <code>useState<\/code> Hook es Entwicklern viel einfacher gemacht, ihren funktionalen Komponenten Zust\u00e4nde hinzuzuf\u00fcgen und die React-<a href=\"https:\/\/kinsta.com\/de\/blog\/rest-api-vs-web-api\/\">API<\/a> insgesamt zu vereinfachen.<\/p>\n<p>Mit dem <code>useState<\/code> Hook k\u00f6nnen Entwicklerinnen und Entwickler nun funktionale Komponenten f\u00fcr die meisten Anwendungsf\u00e4lle verwenden, was die Menge des ben\u00f6tigten Boilerplate-Codes reduziert und die Bewertung des Zustands in ihren Anwendungen erleichtert.<\/p>\n<h3>Bestandteile der useState-Syntax<\/h3>\n<p>Der <code>useState<\/code> Hook nimmt einen anf\u00e4nglichen Statuswert als Argument und gibt ein Array mit zwei Elementen zur\u00fcck: den aktuellen Statuswert und eine Funktion, die den Statuswert aktualisiert.<\/p>\n<p>Hier ist die Syntax:<\/p>\n<pre><code class=\"language-jsx\">const [state, setState] = useState(initialState);<\/code><\/pre>\n<ul>\n<li><code>state<\/code>: Der aktuelle Statuswert.<\/li>\n<li><code>setState<\/code>: Eine Funktion, die den Zustandswert aktualisiert.<\/li>\n<li><code>initialState<\/code>: Der Anfangswert der Zustandsvariable, die deklariert wird. Dieser Wert ist optional. Wenn kein Wert angegeben wird (was nicht ratsam ist), wird er automatisch auf <code>undefined<\/code> gesetzt.<\/li>\n<\/ul>\n<p>Es ist wichtig zu wissen, dass React bei Verwendung des <code>useState<\/code> Hooks deine Komponente automatisch neu rendert, sobald sich der Statuswert \u00e4ndert.<\/p>\n<h2>So verwendest du den useState Hook<\/h2>\n<p>Um <code>useState<\/code> zu implementieren, rufst du die Funktion auf und gibst einen Anfangswert als Argument an. Die Funktion gibt ein Array zur\u00fcck, das den aktuellen Statuswert und eine Funktion zur Aktualisierung des Status enth\u00e4lt.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr die Verwendung von <code>useState<\/code> zur Verwaltung eines einfachen Z\u00e4hlers:<\/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 diesem Beispiel initialisieren wir den Zustand von <code>count<\/code> mit dem <code>useState<\/code> Hook auf 0. Dann zeigen wir den aktuellen Z\u00e4hlwert und eine Schaltfl\u00e4che an. Wenn die Schaltfl\u00e4che angeklickt wird, wird der Z\u00e4hlwert erh\u00f6ht, da wir mit der Funktion <code>setCount<\/code> eine Pfeilfunktion hinzugef\u00fcgt haben.<\/p>\n<pre><code class=\"language-jsx\">&lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;\/button&gt;<\/code><\/pre>\n<p>Wenn du den <code>useState<\/code> Hook verwendest, musst du daran denken, ihn aus der React-Bibliothek zu importieren. Wenn du den Import vergisst, wirst du wahrscheinlich auf Fehler sto\u00dfen, wenn du versuchst, den Hook zu verwenden. Hier erf\u00e4hrst du, wie du useState importierst:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';<\/code><\/pre>\n<p>Indem du <code>useState<\/code> in die Import-Anweisung einf\u00fcgst, sagst du React, dass du den <code>useState<\/code> Hook in deiner Komponente verwenden willst.<\/p>\n<h2>Verwendung verschiedener Datentypen mit dem useState Hook in React<\/h2>\n<p>Der <code>useState<\/code> Hook in React ist nicht darauf beschr\u00e4nkt, nur String- oder numerische Datentypen zu verwalten. Du kannst ihn auch verwenden, um Zust\u00e4nde f\u00fcr verschiedene Datentypen zu verwalten, z. B. f\u00fcr Arrays, Objekte und Boolesche Werte.<\/p>\n<h3>Arrays mit dem useState Hook verwenden<\/h3>\n<p>Du kannst den <code>useState<\/code> Hook verwenden, um ein Array in React zu verwalten. Wenn du zum Beispiel ein Array mit Fr\u00fcchten hast, kannst du deinen Status mit dem Array initialisieren:<\/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 diesem Beispiel verwenden wir <code>useState<\/code>, um ein Array namens <code>list<\/code> zu verwalten. Der Ausgangszustand von <code>list<\/code> ist auf ein Array mit drei Objekten &#8211; <strong>Apfel<\/strong>, <strong>Banane<\/strong> und <strong>Orange<\/strong>&#8211; eingestellt.<\/p>\n<p>Wir haben auch eine Funktion <code>addToList<\/code> erstellt, die alle Elemente des Arrays mit dem Spread-Operator kopiert (<code>...<\/code>) und dann ein neues Element <strong>Traube<\/strong> zum Array <code>list<\/code> hinzuf\u00fcgt, sobald die Schaltfl\u00e4che &#8222;Element hinzuf\u00fcgen&#8220; angeklickt wird.<\/p>\n<p>Dieses Mal aktualisieren wir den Status nicht inline mit einer Pfeilfunktion, weil es sinnvoller ist, diese Operation als eigenst\u00e4ndige Funktion zu erstellen und sie \u00fcber die <code>onClick<\/code> Methode aufzurufen, die der Schaltfl\u00e4che &#8222;<strong>Element hinzuf\u00fcgen<\/strong>&#8220; hinzugef\u00fcgt wurde.<\/p>\n<h3>Verwendung von Objekten mit dem useState Hook<\/h3>\n<p>Du kannst den <code>useState<\/code> Hook auch verwenden, um ein Objekt in React zu verwalten. Hier ist ein Beispiel:<\/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 diesem Beispiel verwenden wir <code>useState<\/code>, um ein Objekt namens user zu verwalten. Der Ausgangszustand von <code>user<\/code> ist ein Objekt mit zwei Eigenschaften &#8211; <strong>Name<\/strong> und <strong>Alter<\/strong>.<\/p>\n<p>Wir haben auch eine Funktion <code>handleClick<\/code>, die alle Objektdaten mit dem Spreizungsoperator kopiert (<code>...<\/code>) und au\u00dferdem das Alter des Benutzers um <strong>1<\/strong> erh\u00f6ht, wenn die Schaltfl\u00e4che <strong>Alter erh\u00f6hen<\/strong> angeklickt wird.<\/p>\n<p>Es ist wichtig zu wissen, dass du dieses Objekt einer Variablen zuweisen und die Variable dann initialisieren kannst. Das ist n\u00fctzlich, wenn du ein gro\u00dfes Objekt oder Array hast und einen leicht verst\u00e4ndlichen Code schreiben m\u00f6chtest:<\/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>Verwendung von Booleschen Werten mit dem useState Hook<\/h3>\n<p>Du kannst den <code>useState<\/code> Hook auch verwenden, um einen booleschen Wert in React zu verwalten. Hier ist ein Beispiel:<\/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 diesem Beispiel verwenden wir <code>useState<\/code>, um einen booleschen Wert namens <code>isOn<\/code> zu verwalten. Der Anfangszustand von <code>isOn<\/code> ist auf <code>false<\/code> gesetzt. Wir haben auch eine Funktion <code>toggleSwitch<\/code>, die den Wert von <code>isOn<\/code> umschaltet, wenn der <strong>Toggle Switch<\/strong> Button angeklickt wird.<\/p>\n<p>Diese Funktion kann verwendet werden, um das Umschalten zwischen dem hellen und dem dunklen Modus in deinen Projekten zu steuern.<\/p>\n<p>Bevor wir zum Schluss kommen, wollen wir uns noch eine fortgeschrittene Anwendung des <code>useState<\/code> Hooks mit Formularen ansehen.<\/p>\n<h2>Der useState Hook und Formulare<\/h2>\n<p>Um Formulardaten und Benutzereingaben in React zu verarbeiten, verwendest du state. Dieser wird verwendet, um die aktuellen Werte der Formularelemente zu speichern. Er verfolgt alle Benutzerinteraktionen, z. B. die Eingabe eines Textes oder die Auswahl einer Option aus einem Dropdown-Men\u00fc, und aktualisiert schlie\u00dflich den Status mit dem neuen Wert.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr die Verwendung von <code>useState<\/code>, um ein einfaches Formular zu erstellen:<\/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 diesem Beispiel erstellen wir zun\u00e4chst ein Objekt f\u00fcr die Daten, die mit dem Formular erfasst werden sollen, mit Standardwerten f\u00fcr die Felder <strong>Vorname<\/strong>, <strong>Nachname<\/strong> und <strong>E-Mail<\/strong>. Dann initialisieren wir den Zustand <code>formData<\/code> mit <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>Dann definieren wir eine <code>handleInputChange<\/code> Funktion, die den <code>formData<\/code> Status aktualisiert, sobald ein Formularfeld ge\u00e4ndert wird.<\/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>Schlie\u00dflich definieren wir eine <code>handleSubmit<\/code> Funktion, die die aktuellen Formulardaten auf der Konsole protokolliert, wenn das Formular abgeschickt wird.<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (event) =&gt; {\n    event.preventDefault();\n    console.log(formData);\n};<\/code><\/pre>\n<h2>useState Best Practices<\/h2>\n<p>Bei der Verwendung des <code>useState<\/code> Hooks ist es wichtig, bew\u00e4hrte Praktiken zu befolgen, um h\u00e4ufige Fehler zu vermeiden und eine optimale Leistung zu gew\u00e4hrleisten. Hier sind ein paar Tipps, die du beachten solltest:<\/p>\n<ul>\n<li><strong>Vermeide tief verschachtelte Zust\u00e4nde<\/strong>: Anstatt komplexe Zustandsdaten in einem einzigen Objekt zu speichern, solltest du sie in kleinere Teile zerlegen, damit sie leichter zu verwalten sind.<\/li>\n<li><strong>Verwende funktionale Aktualisierungen<\/strong>: Wenn du einen Zustand auf der Grundlage eines vorherigen Zustands aktualisierst, solltest du funktionale Aktualisierungen verwenden, um Race Conditions zu vermeiden und sicherzustellen, dass der richtige Zustand aktualisiert wird.<\/li>\n<li><strong>Vermeide \u00fcberm\u00e4\u00dfige Statusaktualisierungen<\/strong>: Statusaktualisierungen k\u00f6nnen teuer sein, also versuche, die Anzahl der Aktualisierungen zu minimieren. Ziehe den <code>useEffect<\/code> Hook in Betracht, um Aktualisierungen zu b\u00fcndeln und die Leistung zu optimieren.<\/li>\n<li><strong>Vermeide unn\u00f6tige Re-Renderings<\/strong>: React rendert eine Komponente immer dann neu, wenn sich ihr Zustand oder ihre Props \u00e4ndern. Um unn\u00f6tige Re-Renderings zu vermeiden, verwende die Memo-Funktion.<\/li>\n<\/ul>\n\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel haben wir uns eingehend mit dem <code>useState<\/code> Hook besch\u00e4ftigt und gelernt, wie man ihn verwendet, um funktionalen Komponenten einen Zustand hinzuzuf\u00fcgen. Au\u00dferdem haben wir besprochen, wie <code>useState<\/code> mit Formularen, Arrays und Objekten verwendet werden kann, und wir haben uns mit Best Practices f\u00fcr eine optimale Leistung besch\u00e4ftigt. Wenn du diese bew\u00e4hrte Praktiken befolgst, kannst du sicherstellen, dass deine React-Anwendungen effizient, skalierbar und einfach zu warten sind.<\/p>\n<p>Du suchst nach der idealen Hosting-L\u00f6sung f\u00fcr deine React-Anwendungen? Teste das <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting von Kinsta<\/a> kostenlos!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React ist eine beliebte JavaScript-Bibliothek, die f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen verwendet wird. Sie bietet Entwicklern eine Vielzahl von Werkzeugen, darunter Hooks, die das Erstellen von &#8230;<\/p>\n","protected":false},"author":287,"featured_media":62806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[975],"class_list":["post-62805","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>Erste Schritte mit dem useState Hook in React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!\" \/>\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\/de\/blog\/usestate-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erste Schritte mit dem useState Hook in React\" \/>\n<meta property=\"og:description\" content=\"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\" \/>\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-13T09:20:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:15:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.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=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Erste Schritte mit dem useState Hook in React\",\"datePublished\":\"2023-06-13T09:20:06+00:00\",\"dateModified\":\"2025-10-01T19:15:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\"},\"wordCount\":1376,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\",\"name\":\"Erste Schritte mit dem useState Hook in React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg\",\"datePublished\":\"2023-06-13T09:20:06+00:00\",\"dateModified\":\"2025-10-01T19:15:35+00:00\",\"description\":\"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Erste Schritte mit dem useState Hook in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Erste Schritte mit dem useState Hook in React - Kinsta\u00ae","description":"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!","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\/de\/blog\/usestate-react\/","og_locale":"de_DE","og_type":"article","og_title":"Erste Schritte mit dem useState Hook in React","og_description":"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!","og_url":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-06-13T09:20:06+00:00","article_modified_time":"2025-10-01T19:15:35+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Erste Schritte mit dem useState Hook in React","datePublished":"2023-06-13T09:20:06+00:00","dateModified":"2025-10-01T19:15:35+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/"},"wordCount":1376,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/usestate-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/","url":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/","name":"Erste Schritte mit dem useState Hook in React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg","datePublished":"2023-06-13T09:20:06+00:00","dateModified":"2025-10-01T19:15:35+00:00","description":"Optimiere deine React-App mit dem useState Hook! Unser anf\u00e4ngerfreundlicher Leitfaden enth\u00e4lt alles, was du \u00fcber die Verwaltung von Zust\u00e4nden in func!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/usestate-react\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/usestate-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/usestate-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"Erste Schritte mit dem useState Hook in React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=62805"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62805\/revisions"}],"predecessor-version":[{"id":63276,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62805\/revisions\/63276"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62805\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/62806"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=62805"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=62805"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=62805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}