Gids voor useState in React
Je wachtwoordbalk verandert van zwak naar sterk terwijl je typt. React onthoudt wat je typt via state.
State bevat gegevens. Het houdt bij wat je typt of waar je op klikt.
Stel je voor dat je je naam typt.
- Je beginstate is een lege string.
- Je typt J.
- Je roept een functie aan om de state bij te werken van "" naar "J".
- Je typt o.
- Je roept de functie aan om de state te veranderen naar "Jo".
Elke keer dat je de state bijwerkt, voert React een re-render uit van de UI. Re-rendering betekent dat React de oude weergave wist en een nieuwe tekent met je bijgewerkte gegevens.
Waarom geen gewone variabelen gebruiken? Een gewone variabele verandert wel in je code, maar werkt het scherm niet bij. Je gebruikers zien dan verouderde gegevens. React state lost dit op door je gegevens te koppelen aan je UI.
Hoe je useState gebruikt:
Importeer het uit React. import { useState } from 'react';
Declareer het. const [age, setAge] = useState(20);
In dit voorbeeld:
- age is je huidige waarde.
- setAge is de functie om de waarde te veranderen.
- 20 is je beginwaarde.
Probeer dit nu zelf. Open een React-project. Maak een teller. Klik op een knop om de teller bij te werken. Kijk hoe het scherm direct verandert.
Bron: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i