Here’s a couple of lessons I’ve learned about how not to build React components. These are things I’ve come across over the past couple of months and thought they might be of interest to you if you’re working on a design system, especially one with a bunch of legacy technical decisions and a lot of tech debt under the hood.
Lesson 1: Avoid child components as much as you can
One thing about working on a big design system with lots of components is that the following pattern eventually starts to become problematic real quick:
<Card>
<Card.Header>Title</Card.Header>
<Card.Body><p>This is some content</p></Card.Body>
</Card>The problematic parts are those child components, Card.Body and Card.Header. This example isn’t terrible because things are relatively simple — it’s when components get more complex that things can get bonkers. For example, each child component can have a whole series of complex props that interfere with the others.
One of my biggest pain points is with our Form components. Take this:
<Form>
<Input />
<Form.Actions>
<Button>Submit</Button>
<Button>Cancel</Button>
</Form.Actions>
</Form>I’m simplifying things considerably, of course, but every time an engineer wants to place two buttons next to each other, they’d import Form.Actions, even if there wasn’t a Form on the page. This meant that everything inside the Form component gets imported and that’s ultimately bad for performance. It just so happens to be bad system design implementation as well.
This also makes things extra difficult when documenting components because now you’ll have to ensure that each of these child components are documented too.
So instead of making Form.Actions a child component, we should’ve made it a brand new component, simply: FormActions (or perhaps something with a better name like ButtonGroup). That way, we don’t have to import Form all the time and we can keep layout-based components separate from the others.
I’ve learned my lesson. From here on out I’ll be avoiding child components altogether where I can.
Lesson 2: Make sure your props don’t conflict with one another
Mandy Michael wrote a great piece about how props can bump into one another and cause all sorts of confusing conflicts, like this TypeScript example:
interface Props {
hideMedia?: boolean
mediaIsEdgeToEdge?: boolean
mediaFullHeight?: boolean
videoInline?: boolean
}Mandy writes:
The purpose of these props are to change the way the image or video is rendered within the card or if the media is rendered at all. The problem with defining them separately is that you end up with a number of flags which toggle component features, many of which are mutually exclusive. For example, you can’t have an image that fills the margins if it’s also hidden.
This was definitely a problem for a lot of the components we inherited in my team’s design systems. There were a bunch of components where boolean props would make a component behave in all sorts of odd and unexpected ways. We even had all sorts of bugs pop up in our Card component during development because the engineers wouldn’t know which props to turn on and turn off for any given effect!
Mandy offers the following solution:
type MediaMode = 'hidden'| 'edgeToEdge' | 'fullHeight'
interface Props {
mediaMode: 'hidden'| 'edgeToEdge' | 'fullHeight'
}In short: if we combine all of these nascent options together then we have a much cleaner API that’s easily extendable and is less likely to cause confusion in the future.
That’s it! I just wanted to make a quick note about those two lessons. Here’s my question for you: What have you learned when it comes to making components or working on design systems?