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