Too many React Context providers

Question

New to react here and trying to wrap my head round the new Context API (I haven\'t looked into Redux etc. yet).

Seems I can do much of what I need to do, but I\'m going

Answer 1

If you want a solution for composing Providers without any third-party libraries, here's one with Typescript annotations:

// Compose.tsx

interface Props {
    components: Array>>
    children: React.ReactNode
}

export default function Compose(props: Props) {
    const { components = [], children } = props

    return (
        <>
            {components.reduceRight((acc, Comp) => {
                return {acc}
            }, children)}
        
    )
}

Usage:

You can of course remove the annotations if you don't use Typescript.