Begrip: useEffect

De useEffect hook kan gebruikt worden om een bepaalde actie uit te voeren nadat de component gerenderd is. De actie die uitgevoerd wordt na het renderen is in eerste instantie bedoeld om te synchroniseren met een extern systeem. De term extern systeem bevat hier alles wat niet rechtstreeks door React beheerd wordt. Enkele voorbeelden zijn real-time data connecties, loggen van bezochte pagina's in een externe database, het aanspreken van browser API's (keydown, resize, ...), een third-party library die geen React componenten aanbiedt, ...

De useEffect hook heeft 2 parameters, de eerste parameter is een functie die een bepaalde actie uitvoert, de tweede optionele parameter is dependenciesArray. Via de dependencies wordt het mogelijk om te controleren wanneer de eerste parameter uitgevoerd wordt.

Als de dependencies ontbreken, zal de functie na elke render uitgevoerd worden.

const SomeComponent: FunctionComponent = () => {

    useEffect(() => {
        // Functie wordt uitgevoerd na elke render.
    })

    return <></>
}

Als de dependencies array aanwezig is, maar leeg is, dan wordt de functie één keer, na de eerste render uitgevoerd.

const SomeComponent: FunctionComponent = () => {

    useEffect(() => {
        // Functie wordt één keer uitgevoerd na de eerste render.
    }, [])

    return <></>
}

Als de dependencies array één of meer elementen bevat, dan wordt de functie uitgevoerd na de eerste render en als minstens één van deze elementen wijzigt in waarde.

const SomeComponent: FunctionComponent = () => {

    useEffect(() => {
        // Functie wordt uitgevoerd na de eerste render
        // en als dependencyVar1, dependencyVar2 
        // of een andere dependency van waarde wijzigt.
    }, [dependencyVar1, dependencyVar2, ...])

    return <></>
}

Tenslotte kan de eerste parameter een returnwaarde hebben, deze returnwaarde is een functie die real-time connecties stop zet, event listeners, timeouts of intervals annuleert of andere clean-up code uitvoert. Dit soort clean-up is cruciaal om memory leaks en bugs te vermijden, daarom wordt elke functie in de useEffect hook ook twee keer uitgevoerd in development. Dit vertraagt de development omgeving, maar zorgt ervoor dat bugs gedetecteerd worden voordat de applicatie in productie gezet wordt.

const SomeComponent: FunctionComponent = () => {

    useEffect(() => {
        // Een functie die een bepaalde actie uitvoert.
        
        // Geef een functie terug die clean-up uitvoert voor
        // de bovenstaande code.
        return () => {
            // Clean-up code
        }
    }, [dependencyVar1, dependencyVar2, ...])

    return <></>
}