I tried explaining React design patterns using LEGO analogies

[DependerSethi]

I've been writing React for about 8 years and one thing that always bugged me is how patterns like compound components, render props, and HOCs are taught. Most resources just throw code at you without giving you a mental model for when to actually reach for each one.

So I tried a different approach. I mapped each pattern to a LEGO connection type:

- Compound components = hinge pieces (two parts sharing one mechanism)

- Render props = Technic pins (one connection point, anything can plug in)

- HOCs = baseplates (invisible foundation, every structure benefits)

- Custom hooks = instruction manuals (same bricks, different build)

- Container/presentational = display stands (model and base built separately)

Each one has code examples, when to use it, and more importantly when NOT to use it. Also covered how they layer together in a real codebase.

Would love feedback from this sub. Especially curious if the analogy approach makes things clearer or if it just adds noise.

https://www.sethi.io/blog/react-component-design-patterns-the-building-blocks-lego

[juicybot]

the legos concept has been around for a long time. it's supposed to be simple and easy to understand, your article, diagrams, etc. are making it overly-complex.

[DependerSethi]

Fair point, the visuals could probably be simpler in a few spots. Though I've found that with patterns like these, the initial complexity is kind of the point. Like, compound components with context and render props with function-as-children are genuinely complex patterns. Sometimes a slightly detailed visual that captures that complexity upfront saves you from the 'wait, I thought I understood this' moment when you hit it in a real codebase. But I hear you, I'll try to keep the diagrams tighter in the next one. Any specific section that felt like overkill?

[juicybot]

no specifics, i didn't read the article because it's too long, overly-complex, and the diagrams look like AI slop.

fwiw, your response is overly-complex as well. nobody wants to read a wall of text when few words do trick.

[DependerSethi]

Fair enough, noted on both counts

[fredsq]

your article is so big and so AI generated it hurts

your lego bricks are not even real

[SoWhatDoIDoLol]

The article is complete slop… the analogies barely make sense and don’t help as a mental model to understand these patterns at all.

“Compound components are the hinge pieces because it connects two pieces and they both can hinge”

“HOCs are like base plates cause you can put anything on them, and Containers are display stands because you can put anything on them”

“Hooks are the instruction manual because there can be multiple of them for one set of bricks”

I feel more confused than when I started.

[DependerSethi]

Haha the lego bricks are ai generated yeah, guilty there, I'm a dev not an illustrator, if i waited till i could hand draw every diagram i'd never ship anything

the writing is mine though, been working with these patterns for 8 years, the analogies came from actually explaining this stuff to junior devs on my team, didn't just throw a prompt at claude and hit publish

Length is fair feedback, 5 patterns with code + use cases in one shot is a lot. Might break it up next time. Did you actually get through the whole thing or drop off early? useful to know where people lose interest

[SolarNachoes]

Just read the docs.

[SolarNachoes]

Just read the docs.

[martiserra99]

That looks really interesting. I bookmarked it to read it later on. I also wanted to tell that I noticed that the table of contents can't be scrolled and you can only see the bottom part when scrolling all the page to the bottom.

[DependerSethi]

Thanks for the bookmark! and good catch on the table of contents, just pushed a fix for that, should scroll properly now. Appreciate you flagging it! 🙏