Statebeheer met Hooks
Leer componentspecifieke gegevens beheren met `useState` en andere essentiële React Hooks.
Statebeheer met Hooks is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Introductie tot de status van componenten
In React verwijst status naar gegevens die een component intern beheert en die in de loop van de tijd kunnen veranderen, waardoor ook de rendering van de component verandert.
Zie het als het geheugen van een component. Wanneer de status verandert, werkt React alleen de noodzakelijke delen van je gebruikersinterface efficiënt bij.
Waarom status belangrijk is
Status is essentieel voor het bouwen van interactieve en dynamische webapplicaties. Zonder status zou je UI statisch zijn en niet op acties van gebruikers kunnen reageren.
- Invoer van de gebruiker: tekst uit een invoerveld opslaan.
- Schakelaars: bijhouden of een menu geopend of gesloten is.
- Tellers: een numerieke waarde bijhouden.
Hierdoor komen je componenten tot leven!
Maak kennis met de `useState`-hook
Om status toe te voegen aan functionele componenten in React gebruiken we een speciale functie die een Hook heet. De belangrijkste hook voor het beheren van lokale componentstatus is useState.
Hooks zijn functies waarmee je vanuit functionele componenten toegang krijgt tot React-functies zoals status en methoden voor de levenscyclus.
Status declareren met `useState`
De hook useState geeft een array met twee items terug:
- De huidige statuswaarde.
- Een functie om die statuswaarde bij te werken.
We gebruiken destructurering van arrays om deze waarden te verkrijgen:
import React, { useState } from 'react';
function MyComponent() {
// Declares a state variable 'count' initialized to 0
// 'setCount' is the function to update 'count'
const [count, setCount] = useState(0);
// Declares a state variable 'name' initialized to an empty string
const [name, setName] = useState('');
return (
<div>
<p>Count: {count}</p>
<p>Name: {name}</p>
</div>
);
}Status bijwerken: eenvoudige teller
Om de status te wijzigen, moet je de setterfunctie aanroepen (bijvoorbeeld setCount). Wanneer je deze functie aanroept, rendert React je component opnieuw met de nieuwe statuswaarde.
Probeer op de knop te klikken om te zien hoe de teller verandert!
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1); // Update the state
};
return (
<div>
<p>Current Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Statusupdates zijn asynchroon
Het is belangrijk om te weten dat statusupdates in React vaak asynchroon zijn. Dit betekent dat React meerdere statusupdates kan bundelen voor betere prestaties.
Daarom is het veiliger om een functie aan de setter door te geven als je nieuwe status afhangt van de vorige status.
Functionele statusupdates
Als je de status bijwerkt op basis van de vorige waarde, geef je een functie door aan de setter. Deze functie ontvangt de vorige status als argument.
Dit patroon zorgt ervoor dat je altijd met de meest actuele status werkt en voorkomt subtiele fouten.
import React, { useState } from 'react';
function SafeCounter() {
const [count, setCount] = useState(0);
const incrementByTwo = () => {
// This ensures we always increment based on the latest count
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementByTwo}>Add 2</button>
</div>
);
}Invoer van gebruikers beheren
useState is ideaal voor het beheren van invoerelementen in formulieren. Wanneer de waarde van een invoer door de React-status wordt beheerd, noemen we dit een gecontroleerde component.
Zo krijg je volledige controle over de waarde van de invoer en kun je deze eenvoudig valideren of omvormen.
Voorbeeld van gecontroleerde invoer
Zo kun je useState gebruiken om de waarde van een tekstinvoerveld te beheren. De gebeurtenisafhandelaar onChange werkt de status elke keer bij wanneer de gebruiker typt.
Typ iets in het vak!
import React, { useState } from 'react';
function InputField() {
const [text, setText] = useState('');
const handleChange = (event) => {
setText(event.target.value); // Update state with input's value
};
return (
<div>
<input type="text" value={text} onChange={handleChange} />
<p>You typed: {text}</p>
</div>
);
}Korte controle: `useState`
Welke van de volgende uitspraken over de hook useState in React zijn WAAR?
Samenvatting: status met hooks
Je hebt nu de basis van statusbeheer in React geleerd met de hook useState!
- Wat is status? Gegevens die veranderen en van invloed zijn op het renderen van componenten.
useState: De belangrijkste hook om status aan functionele componenten toe te voegen.- Syntax:
const [value, setValue] = useState(initial); - Bijwerken: Gebruik altijd de setterfunctie. Geef voor updates op basis van de vorige status een functie door aan de setter.
- Toepassingen: Tellers, schakelaars, invoer van gebruikers beheren en nog veel meer!
Het beheersen van useState is een fundamentele stap bij het bouwen van interactieve React-apps.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Statebeheer met Hooks” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Statebeheer met Hooks”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Wat leer ik in “Statebeheer met Hooks”?
Leer componentspecifieke gegevens beheren met `useState` en andere essentiële React Hooks. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?
Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Statebeheer met Hooks”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?
Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- React-componenten en JSX
- Statebeheer met Hooks
- Props en communicatie tussen componenten
- Lijsten, keys en conditionele UI renderen