Begrip: Provider

Voor elke context moet er minstens één provider voorzien worden. De provider wordt rond alle componenten geplaatst die gebruik maken van de context en biedt een waarde aan voor de context. Alle kinderen van de provider kunnen deze waarde dan uitlezen, ongeacht hoe diep ze genest zijn in de componentenboom. Als er, in de bovenliggende componentenboom, meerdere providers beschikbaar zijn voor een bepaalde context, dan wordt de dichtstbijzijnde provider gebruikt. Als er helemaal geen provider beschikbaar is, dan wordt de standaardwaarde van de context gebruikt.

De provider kan op twee manieren gebruikt worden. Origineel moest de provider gebruikt worden als <Context.Provider>, maar sinds React 19 is het ook mogelijk om <Context> te schrijven, de Provider property wordt dan automatisch gebruikt. In de frontend cursus tref je voornamelijk de oudere notatie aan, in de backend en mobile cursussen kan je een combinatie van de oude en nieuwe notatie aantreffen.

Codevoorbeeld (React >= 19)

import {createContext, FunctionComponent} from 'react'

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

const SomeContext = createContext<ISomeContext>(defaultValue)

const SomeComponent: FunctionComponent = () => {

    return (
        <SomeContext value={foo}>
            {/* Children can use the provided value */}
        </SomeContext>
    )
}

Codevoorbeeld (React < 19)

import {createContext, FunctionComponent} from 'react'

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

const SomeContext = createContext<ISomeContext>(defaultValue)

const SomeComponent: FunctionComponent = () => {

    return (
        <SomeContext.Provider value={foo}>
            {/* Children can use the provided value */}
        </SomeContext.Provider>
    )
}

Visuele voorstelling providers

:::