Every React app I opened had the same thing at its root: a pyramid of context providers, each one nested inside the last. It works, but it’s hard to read and painful to reorder. It turns out you can flatten it with a single line.
👉 Continue reading on my blog: 🔺 Flat React Doom Pyramid in 1LOC
Top comments (10)
Interesting approach. Never occurred to me to try such an angle.
After careful consideration I would still refrain from using it in any actual project.
The nesting as it appears to the developer when viewing the jsx source code should not -in such an unexpected way- differ from the actual nesting during runtime.
Code should be as easy to understand as possible, as clear as possible, and as un-confusing as possible.
With this approach it could easily happen that someone gets the order wrong. Or thinks the elements are siblings, when they are not.
But kudos for a clever idea and novel approach.
And lastly, the projects I work with do not really require that many providers.
Agreed! The first approach can be pretty confusing and overwhelming to look at
Now I also agree. Looking at first version looks confusing.
Great idea, however, what if you moved all of the providers to the Pipe component?
Can you please elaborate? 🤔 That was the point. You write the code flat, and the Pipe will make them in a pyramid shape automatically
You could have all of the providers inside of the, say, Pipe component and then you could do just something like this:
<Pipe><App/></Pipe>.Yeap
Neat.
Haha good one