Hör auf, React-Provider zu verschachteln

Das ist ein einfaches Beispiel für eine TypeScript-React-Funktion, mit der du viele Provider-Komponenten, etwa die von React Context, in einer unkomplizierten Funktion bündeln kannst.

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

Damit kannst du deine Provider jetzt einfach so zusammensetzen:

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

Das ist viel, viel besser als das hier:

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