Thread by @Swizec

Variants – a quick tip for better React components

A pattern I've seen lots is adding a bunch of booleans to cover different use-cases of a reusable #React component. This makes components hard to use

A variant prop has worked great so far 🧵

swizec.com/blog/variants-…

You start with a smol reusable component

Then it grows, you boolean all the things

And your component blows up in complexity. At 3 bools you have 8 different ways to hold your component.

You think you'll get it right every time? Debugging becomes into a game of whack-a-mole

Are all 8 combinations valid? Probably not.

Identify the valid combos and turn them into variants. With TypeScript your team even gets autocomplete for available variants 😍

This is a lesson that feels obvious and you learn it many times per year. I remember @kyleshevlin talking about this and thinking "D'oh obvious"

6 months later and I had a codebase full of boolean'd components. It sneaks up on you!

This is a pattern that feels obvious but you learn it a few times per year. I remember @kyleshevlin talking about it on Twitter and thinking "D'oh that's obvious"

6 months later I had a codebase full of hard to use boolean'd components 😂