Quit nesting React providers
·1 min
This is a simple example of a TypeScript React function that can assist in combining many Provider components, such as those used by React Context, into a straightforward function.
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} />
);
}
With this, you can now simply compose your providers like so:
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>
);
}
Which is much much better than:
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>
);
}