Deja de anidar providers de React

Este es un ejemplo sencillo de una función de React en TypeScript que ayuda a combinar muchos componentes Provider, como los que usa React Context, en una función simple.

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} />
  );
}

Con esto, ya puedes componer tus providers así de fácil:

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>
  );
}

Que es mucho, muchísimo mejor que esto:

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>
  );
}