A React Pattern to Avoid ‘Apropcalypse’

Typical Component Development

Lets imagine a custom component that has an accordion UI. So we’ll build this Accordion component.

  • Re-renders and JSX that doesn’t even apply to your use case
  • Implementation complexity — breeding ground for bugs
  • API complexity. Harder for other people to use your project. Your documentation can become complex.

Making it Simpler / Flexible

The following implementation might look a bit confusing at the beginning. Note it uses React Hooks, so you might wanna brush up on it before digging into it (you can read my article on Hooks).



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store