Begrip: useRef als persistente variabele

Via de useRef hook kan je een variabele persistent maken doorheen renders, i.e. tussen verschillende keren dat een functiecomponent opgeroepen wordt of de state aangepast wordt.

Net zoals de useState hook heeft de useRef hook een generische parameter waarmee het type van de inhoud van de inhoud van de hook bewaard kan worden.

De waarde van de _useRef* hook zit steeds in de current property. Dus de signatuur van de hook ziet er (ongeveer) als volgt uit.

useRef = <T>(defaultValue: T) => Record<'currentValue', T>

import {FunctionComponent, useRef} from 'react'

const SomeComponent: FunctionComponent = () => {
    const persistentVariable = useRef<string>(defaultValue)

    const foo = () => {
        if (persistentVariable.current === bar) {
            // Do something
            // Update the persistent variable
            persistentVariable.current = 'baz'
        }
    }

    return <p onClick={foo}>Some JSX code</p>
}