? 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>
<Act…

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 Kévin et Laurianne Langlais on Unsplash


Print Share Comment Cite Upload Translate
APA
Andrew Luca | Sciencx (2024-03-28T21:49:26+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/.
MLA
" » ? Flat React Doom Pyramid in 1LOC." Andrew Luca | Sciencx - Wednesday September 22, 2021, https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/
HARVARD
Andrew Luca | Sciencx Wednesday September 22, 2021 » ? Flat React Doom Pyramid in 1LOC., viewed 2024-03-28T21:49:26+00:00,<https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/>
VANCOUVER
Andrew Luca | Sciencx - » ? Flat React Doom Pyramid in 1LOC. [Internet]. [Accessed 2024-03-28T21:49:26+00:00]. Available from: https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/
CHICAGO
" » ? Flat React Doom Pyramid in 1LOC." Andrew Luca | Sciencx - Accessed 2024-03-28T21:49:26+00:00. https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/
IEEE
" » ? Flat React Doom Pyramid in 1LOC." Andrew Luca | Sciencx [Online]. Available: https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/. [Accessed: 2024-03-28T21:49:26+00:00]
rf:citation
» ? Flat React Doom Pyramid in 1LOC | Andrew Luca | Sciencx | https://www.scien.cx/2021/09/22/%f0%9f%94%ba-flat-react-doom-pyramid-in-1loc/ | 2024-03-28T21:49:26+00:00
https://github.com/addpipe/simple-recorderjs-demo