Begrip: State updaten

De useState hook geeft een array terug met twee elementen, het tweede element is een setter die gebruikt kan worden om de state aan te passen. Dit kan op twee manieren.

In het eerste geval heeft de setter methode onderstaande signatuur en kan er dus een nieuwe waarde meegegeven worden die de huidige waarde overschrijft.

setState<T> = (newValue: T): void

In het tweede geval neemt de setState methode een functie als argument, deze functie krijgt de huidige waarde van de state als argument en berekend hieruit de nieuwe waarde. Gebruik deze vorm altijd als je de state aanpast op basis van de huidige waarde. De signatuur van de setter is in dit geval:

setState<T> = ((oldValue: T) => T): void

Vervangen

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>
    )
}

Berekenen op basis van de vorige waarde

import {useState} from 'react'

const ExampleComponent: FunctionComponent = () => {
    const [stateValue, setStateValue] = useState<number>(0)

    return (
        <div>
            {stateValue}
            <button onclick={() => setStateValue(old => old + 1)}>
                Verander de state
            </button>
        </div>
    )
}

:::