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 bouwen van applicaties eenvoudiger en efficiënter te maken.
Een van de meest gebruikte Hooks is useState, waarmee developers status kunnen toevoegen aan functional components.
In dit artikel gaan we dieper in op useState, het gebruik en de best practices voor de implementatie ervan.
Wat is de useState Hook?
Voordat we in de details van useState duiken, laten we eerst definiëren wat Hooks zijn en hoe ze verschillen van traditionele class components.
Een Hook is een functie waarmee je state en andere React functies kunt gebruiken in functional components.
In tegenstelling tot class components hebben functional components geen ingebouwde manier om state op te slaan. Hooks zoals useState lossen dit probleem op door je in staat te stellen om state toe te voegen aan functional components.
Achtergrond van de useState Hook
Vóór de introductie van de useState 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.
Hoewel class components en externe bibliotheken voor statebeheer nog steeds haalbare opties zijn, maakte de introductie van de useState Hook het veel eenvoudiger voor developers om state toe te voegen aan hun functional components en vereenvoudigde het de React API in het algemeen.
Met de useState 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.
Onderdelen van de useState syntaxis
De useState Hook neemt een initiële state waarde als argument en retourneert een array met twee elementen: de huidige state waarde en een functie die de state waarde bijwerkt.
Hier is de syntaxis:
const [state, setState] = useState(initialState);state: De huidige state waarde.setState: Een functie die de state waarde bijwerkt.initialState: 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 opundefined.
Het is belangrijk op te merken dat als je de useState Hook gebruikt, React je component automatisch opnieuw zal weergeven als de waarde van de state verandert.
Zo gebruik je de useState Hook
Om useState te implementeren, call je de functie en geef je een initiële waarde door als argument. De functie retourneert een array met de huidige state waarde en een functie om de state bij te werken.
Hier is een voorbeeld van het gebruik van useState om een eenvoudige teller te beheren:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;In dit voorbeeld initialiseren we de status count op 0 met de useState 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 setCount functie.
<button onClick={() => setCount(count + 1)}>Click me</button>Als je de useState 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:
import { useState } from 'react';Door useState op te nemen in het import statement, vertel je React dat je de useState hook wilt gebruiken in je component.
Verschillende gegevenstypen gebruiken met de useState Hook in React
De useState 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.
Arrays gebruiken met de useState Hook
Je kunt de useState 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:
import { useState } from 'react';
function App() {
const [list, setList] = useState(['apple', 'banana', 'orange']);
const addToList = () => {
const newItem = 'grape';
setList([...list, newItem]);
};
return (
<div>
<ul>
{list.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
<button onClick={addToList}>Add Item</button>
</div>
);
}
export default App;In dit voorbeeld gebruiken we useState om een array met de naam list te beheren. De initiële status van list is ingesteld op een array met drie items – apple, banana en orange.
We hebben ook een functie addToList gemaakt die alle array-items kopieert met de spread operator (...) en vervolgens een nieuw item druif toevoegt aan de array list wanneer op de knop “Item toevoegen” wordt geklikt.
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 onClick die is toegevoegd aan de knop Item toevoegen.
Objecten gebruiken met de useState Hook
Je kunt de useState Hook ook gebruiken om een object in React te beheren. Hier is een voorbeeld:
import { useState } from 'react';
function App() {
const [user, setUser] = useState({ name: 'John', age: 30 });
const handleClick = () => {
setUser({ ...user, age: user.age + 1 });
};
return (
<div>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
<button onClick={handleClick}>Increase Age</button>
</div>
);
}
export default App;In dit voorbeeld gebruiken we useState om een object met de naam user te beheren. De initiële status van user is ingesteld op een object met twee properties – name en age.
We hebben ook een functie handleClick die alle objectgegevens kopieert met de spread operator (...) en ook de leeftijd van de gebruiker met 1 verhoogt wanneer op de knop Increase Age wordt geklikt.
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:
import { useState } from 'react';
// Declare data
let userData = {
name: 'John',
age: 30,
};
function App() {
const [user, setUser] = useState(userData);
const handleClick = () => {
setUser({ ...user, age: user.age + 1 });
};
return (
<div>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
<button onClick={handleClick}>Increase Age</button>
</div>
);
}
export default App;Booleans gebruiken met de useState Hook
Je kunt de useState Hook ook gebruiken om een booleaanse waarde te beheren in React. Hier is een voorbeeld:
import { useState } from 'react';
function App() {
const [isOn, setIsOn] = useState(false);
const toggleSwitch = () => {
setIsOn(!isOn);
};
return (
<div>
<p>The switch is {isOn ? 'on' : 'off'}</p>
<button onClick={toggleSwitch}>Toggle Switch</button>
</div>
);
}
export default App;In dit voorbeeld gebruiken we useState om een booleaanse waarde met de naam isOn te beheren. De initiële status van isOn is ingesteld op false. We hebben ook een functie toggleSwitch die de waarde van isOn omwisselt wanneer op de knop Toggle Switch wordt geklikt.
Deze functie kan worden gebruikt om het schakelen tussen donkere en lichte modi in je projecten te beheren.
Laten we, voordat we afsluiten, een geavanceerdere use case van de useState Hook met formulieren verkennen.
De useState Hook en formulieren
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.
Hier is een voorbeeld van het gebruik van useState om een eenvoudig formulier te maken:
import { useState } from 'react';
let formStateData = {
firstName: '',
lastName: '',
email: '',
};
function Form() {
const [formData, setFormData] = useState(formStateData);
const handleInputChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleInputChange}
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleInputChange}
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
/>
<button type="submit">Submit</button>
</form>
);
}
export default Form;In dit voorbeeld maken we eerst een object voor de gegevens die worden verzameld met het formulier met standaardwaarden voor de velden firstName, lastName en email. Vervolgens initialiseren we de status formData met useState.
let formStateData = {
firstName: '',
lastName: '',
email: '',
};
const [formData, setFormData] = useState(formStateData);Vervolgens definiëren we een handleInputChange functie die de formData state bijwerkt wanneer een formulierveld wordt gewijzigd.
const handleInputChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};Tenslotte definiëren we een handleSubmit functie die de huidige formuliergegevens naar de console logt als het formulier wordt verzonden.
const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
};Best practices useState
Bij het gebruik van de useState 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:
- Vermijd deep nested state: 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.
- Gebruik functional updates: 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.
- Vermijd overmatige state updates: Het bijwerken van state kan veel resources kosten, dus probeer het aantal updates dat je doet te minimaliseren. Overweeg het gebruik van de
useEffectHook om updates in batches uit te voeren en de prestaties te optimaliseren. - Vermijd onnodige re-renders: React zal een component opnieuw renderen wanneer de state of props veranderen. Gebruik de memo functie om onnodige re-renders te voorkomen.
Samenvatting
In dit artikel hebben we de useState Hook uitgediept en geleerd hoe je deze kunt gebruiken om state toe te voegen aan functional components. We hebben ook besproken hoe je useState 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ënt, schaalbaar en eenvoudig te onderhouden zijn.
Op zoek naar de ideale hostingoplossing voor je React applicaties? Probeer Kinsta’s Applicatie Hosting gratis uit!
