Begrip: Context

Context is een manier om prop-drilling (het doorgeven van properties tussen verschillende niveaus in de componentenboom) te vermijden. Via context kan een property die op het root niveau van de componentenboom gedefinieerd wordt gebruikt worden door bladeren in de boom, zonder dat de properties door de volledige boom doorgegeven moeten worden.

Het gebruik van context blijft best beperkt tot

• het bewaren van dingen die nauwelijks of niet aangepast worden, zoals de taalkeuze, themakeuze, munteenheid, ...;
• het bouwen van herbruikbare componenten voor een componentenbibliotheek.

Context wordt best niet gebruikt voor dingen die vaak wijzigen, of tenminste niet als deze door veel niveaus gescheiden zijn in de componentenboom. Bewaar dus nooit alle data van je applicatie op het root-niveau. Een wijziging aan de waarde die in de context zit betekent dat elke onderliggende component opnieuw gerenderd moet worden en dit kan slechte performantie tot gevolgd hebben.

Om context te definiëren gebruik je de createContext functie die functie één argument heeft, de standaardwaarde. Deze standaardwaarde wordt gebruikt als de context geconsumeerd wordt in een component die geen parent heeft waarin een specifiekere waarde gedefinieerd is.

import {createContext} from 'react'

interface ISomeContext {
    // De properties van de context.
}

const SomeContext = createContext<ISomeContext>(defaultValue)