Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 22, 2021 09:47 pm GMT

Flat React Doom Pyramid in 1LOC

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:

Thanks for coming to my TED talk! :)

Cover Photo by Kvin et Laurianne Langlais on Unsplash


Original Link: https://dev.to/iamandrewluca/flat-react-doom-pyramid-in-1loc-3j7p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To