Skip Main Navigation

Picking the right React pattern

Advice on how to choose between hooks, render props, compound components and other React patterns

17 December 2020 · 1 min read

  • Desires for shared components in order of least wanting to rewrite

    • UI logic
    • Visual design
    • Layout/spacing
  • Available patterns for components

    • configuration props (easiest to use, easiest to develop, basic)
    • placeholder props
    • polymorphic components (as prop)
    • render prop (abstract UI logic & possibly layout, leave visual design & layout to user)
    • HOC (legacy, similar to render prop, can be done w/ a render prop)
    • compound components
    • hooks (mainly for non-UI logic like state management)
  • Thoughts

    • use configuration props for total control
    • add placeholder props to still control layout + logic, ideally the placeholders are other components or test
    • polymorphic components (+ spread props) allows flexibility of rendered element
    • use render prop for base/abstract components for sharing UI logic but design/layout can be wildly different (button, FAB button, tab)
    • compound components for large components
    • still control UI & want to help w/ design, but layout can be very different
    • avoids having lots of pass-thru props on the main component
    • hooks can aid compound components to share logic

Keep learning my friends. 🤓

Hi, I'm Ben Ilegbodu. 👋🏾

I'm a Christian, husband, and father of 3, with 15+ years of professional experience developing user interfaces for the Web. I'm a Principal Frontend Engineer at Stitch Fix, frontend development teacher, Google Developer Expert, and Microsoft MVP. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on Github

Attend upcoming minishops

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They’re highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day.