ProviderComposer

providerCompose.js

function ProviderComposer({ contexts, children }) {
  return contexts.reduceRight(
    (kids, parent) =>
      React.cloneElement(parent, {
        children: kids,
      }),
    children
  );
}

function ContextProvider({ children }) {
  return (
    <ProviderComposer
      contexts={[<CheckoutProvider />, <LoginProvider />, <AlertProvider />]}
    >
      {children}
    </ProviderComposer>
  );
}

export { ContextProvider };

Does anyone have the Typescript version of this snippet?

@Alfrex92 I just use any:

type Props = {
  contexts: any;
};

const ProviderComposer: React.FC<Props> = ({ contexts, children }) =>
  contexts.reduceRight(
    (kids: React.ReactNode, parent: any) =>
      React.cloneElement(parent, {
        children: kids,
      }),
    children,
  );

const GlobalStateProvider: React.FC = ({ children }) => (
  <ProviderComposer contexts={[<Navigation />, <Authentication />, <Search />]}>
    {children}
  </ProviderComposer>
);

thanks!

This is excellent. I had no idea one huge tree would cause unnecessary renders. This removes one step from moving things to global state, and it also makes global state really similar to local state! Thanks.

this way all one has to do is useContext(SomeGlobalImport). Much cleaner than my initial idea of lookups. More direct and simplified too!