Pára de aninhar providers do React

Este é um exemplo simples de uma função TypeScript React que ajuda a combinar muitos componentes Provider, como os usados pelo React Context, numa única função.

import React, { Fragment } from 'react';

function compose(...components: React.FC[]): React.FC {
  return (
    components.reduce(
      (Accumulator, Component) =>
        ({ children }: React.ComponentProps<FC>): JSX.Element =>
          (
            <Accumulator>
              <Component>{children}</Component>
            </Accumulator>
          )
    ),
    (props) => <Fragment {...props} />
  );
}

Com isto, já podes compor os teus providers assim:

import React from 'react';
import { compose } from '@util';

const App = () => {
  const Provider = compose(
    uiContext.Provider,
    authContext.Provider,
    exampleContext.Provider,
    reallyLongExampleContext.Provider,
  );

  return (
    <Provider>
      </App>
    </Provider>
  );
}

O que é muito, muito melhor do que isto:

import React from 'react';

const App = () => {
  const Provider = compose(
    uiContext.Provider,
    authContext.Provider,
    exampleContext.Provider,
    reallyLongExampleContext.Provider,
  );

  return (
    <uiContext.Provider>
      <authContext.Provider>
        <exampleContext.Provider>
          <reallyLongExampleContext.Provider>
            </App>
          </reallyLongExampleContext.Provider>
        </exampleContext.Provider>
      </authContext.Provider>
    </uiContext.Provider>
  );
}