This content originally appeared on DEV Community and was authored by Andrew Luca
Everyone was happy when React Team announced the new stable Context API, and everyone ditched Redux. But that's not the point.
After 1 year every codebase entrypoint looked like this at least.
<I18nProvider>
<DataProvider>
<ActiveDialogProvider>
<PublicFetchProvider>
<AuthProvider>
<PrivateFetchProvider>
<AuthFetchProvider>
<CustomThemeProvider>
<CustomMuiPickersUtilsProvider>
<LegalsProvider>
<PaymentMethodsProvider>
<CartProvider>
<App />
</CartProvider>
</PaymentMethodsProvider>
</LegalsProvider>
</CustomMuiPickersUtilsProvider>
</CustomThemeProvider>
</AuthFetchProvider>
</PrivateFetchProvider>
</AuthProvider>
</PublicFetchProvider>
</ActiveDialogProvider>
</DataProvider>
</I18nProvider>
Soooo, should we do something about this? Most of the times there is no reason. Nevertheless, here is a simple performant solution in 1 line of code
const Pipe = (p) => p.children.reduceRight((c, e) => ({ ...e, props: { ...e.props, children: c }}));
You can name it however you want:
- Flatten
- Compose
- Pipe
- Squash
- Doom ?
- Nest
And how will look above example? Better!
<Pipe>
<I18nProvider />
<DataProvider />
<ActiveDialogProvider />
<PublicFetchProvider />
<AuthProvider />
<PrivateFetchProvider />
<AuthFetchProvider />
<CustomThemeProvider />
<CustomMuiPickersUtilsProvider />
<LegalsProvider />
<PaymentMethodsProvider />
<CartProvider />
<App />
</Pipe>
This function component takes all its children and nests them from first to last, where first one will be the most outside the tree, and the last one will be last in the tree.
Here is one more variation with TypeScript and different API
function Flatten(props: PropsWithChildren<{ elements: ReactElement[] }>) {
const { elements: e, children: init } = props;
return <>{e.reduceRight((c, e) => cloneElement(e, { children: c }), init)}</>;
}
And the usage will be like this:
<Flatten
elements={[
<I18nProvider />,
<DataProvider />,
<ActiveDialogProvider />,
<PublicFetchProvider />,
<AuthProvider />,
<PrivateFetchProvider />,
<AuthFetchProvider />,
<CustomThemeProvider />,
<CustomMuiPickersUtilsProvider />,
<LegalsProvider />,
<PaymentMethodsProvider />,
<CartProvider />,
]}>
<App />
</Flatten>
I went through multiple iterations, and in the end I prefer first Pipe one liner that I showed.
Sandboxes experiments:
- https://codesandbox.io/s/react-flatten-pyramid-wpr7o
- https://codesandbox.io/s/react-flatten-pyramid-benchs-wgyhf
- https://codesandbox.io/s/react-flatten-pyramid-benchs-clean-o82xw
Thanks for coming to my TED talk! :)
Cover Photo by Kévin et Laurianne Langlais on Unsplash
This content originally appeared on DEV Community and was authored by Andrew Luca
Andrew Luca | Sciencx (2021-09-22T21:47:08+00:00) ? Flat React Doom Pyramid in 1LOC. Retrieved from https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.