A Summary of the Coined Term: Apropcalypse

Article written: 2019/02

While reading an article listing React component practices titled Defining Component APIs in React, I came across the word "Apropcalypse".

Not recognizing it at all, I read further and found it's a coined term discussed in the slide deck "The how and why of flexible React components", apparently meaning "Apocalypse + props". While "Apocalypse" can mean "revelation" or "prophecy," in this context, it seems closer to "the end of the world" or "doomsday."

The following is mostly as described in the original, but I'll write down my own take on it; this refers to something like the following:

<Button
  icon={starIcon}
  text="hello"
/>

Then, as this button grows with various requirements:

<Button
  icon={starIcon}
  afterIcon={heartIcon}
  hoverIcon={filledStarIcon}
  text="hello"
  color="red"
  primary={true}
  ...
/>

It expands like this, and a living hell is completed. This is a pretty common scenario.

Therefore, the idea is to properly utilize children and do it like this instead:

<Button>
  <StarIcon />
  <InnerText color="red">hello</InnerText />
  <HeartIcon />
</Button>