Struggling with React Provider Hell? ????

interface Props 
  components: (({ children }: { children: React.ReactNode }) => JSX.Element)[];
  children: React.ReactNode;
}

function AppContext(props: Props) {
  const { components = [], children } = props;

  return (
    <>
      {components.reduce((acc, Component) => {
        return <Component>{acc}</Component>;
      }, children)}
    </>
  );
}

export default AppContext;
        

The Props interface has two properties:

1. components: An array of functions that take in an object with a children property of type React.ReactNode, and return a JSX.Element. This implies that the components prop expects an array of functions that act as higher-order components (HOCs), which can wrap around the children prop and modify its behavior or appearance.
2. children: A prop of type React.ReactNode, which represents the children elements that will be rendered inside the AppContext component.

The AppContext component uses destructuring to extract the components and children props from the props object:

const { components = [], children } = props;        

Inside the component, the reduce method is used on the components array to iterate through each function in the array, and for each function (Component), it is invoked with acc (the accumulated value) as the children prop. The result of each function invocation is then used as the children prop for the next function invocation, effectively chaining the functions together.

The reduce method accumulates the result of each function invocation, and the final accumulated value is rendered as the children of the AppContext component using JSX syntax:

return (
? <>
? ? {components.reduce((acc, Component) => {
? ? ? return <Component>{acc}</Component>;
? ? }, children)}
? </>
);        

This allows each function in the components array to wrap around the children prop, creating a nested structure of components where each component can modify the children prop in some way. Finally, the entire structure is rendered inside a React.Fragment (denoted by <>...</>) and returned as the output of the AppContext component.

The AppContext component is then exported as the default export of the module, making it available for import and use in other parts of the application.

Now in the index.js or _app.js file

import React from 'react';
import AppContext from 'context';
import ProviderOne from 'context/ProviderOne';
import ProviderTwo from 'context/ProviderTwo';
import ProviderThree from 'context/ProviderThree';


const providers = [
? ProviderOne,
? ProviderTwo,
? ProviderThree
];

const App = () => {
? return (
? ? <AppContext components={providers}>
? ? ? {/* Your application components go here */}
? ? </AppContext>
? );
};

export default App;        

In this example, you are importing the AppContext component from the 'context' module, and passing the providers array as the components prop to the AppContext component. The children prop of AppContext component will contain your application components that you can define within the <AppContext> tags. The providers array will be combined and nested as providers within the AppContext component using the reduce function in the AppContext component definition. This way, you can effectively combine and use multiple providers in your TypeScript React application.