Begrip: useState

De useState hook wordt gebruikt om state toe te voegen aan een React component. Deze functie krijgt een initiële waarde als argument en geeft een array met 2 elementen terug. Het eerste element is de huidige waarde van de state, het tweede element is een setter functie die gebruikt kan worden om de state aan te passen.

In de meeste gevallen kan TypeScript het type van de data in de state afleiden (inferred type), maar in sommige gevallen is dit niet mogelijk. In het laatste geval kan je het type uitdrukkelijk meegeven via de generische parameter. In deze cursus kiezen we ervoor om het type altijd expliciet mee te geven.

import {useState} from 'react'

const ExampleComponent: FunctionComponent = () => {
    const [stateValue, setStateValue] = useState<string>('Een default waarde')
    
    return (
        <div>
            {stateValue}
            <button onclick={() => setStateValue((new Date()).toISOString())}>
                Verander de state
            </button>
        </div>
    )
}