Use a Render Prop!
Michael Jackson

I agree with all of the above and after this pitch, I am sold on render prop components more than ever. But what I am missing a bit is the downsides of using a render prop.

Here are the downsides I discovered while using render props:

  • decreased testability. Using the above example: When writing unit tests for the `App` component you have to first shallow render the `App` component, then `find()` the Mouse component and shallow render the `render` prop of the `Mouse` component in order to make assertions on anything inside the `Mouse`’s render prop. With HoCs testing your component is as easy as passing props to it.
  • The information passed by the render prop is only available inside the render callback, not the whole `App` component. If some other part of the `App` component wants access to it you have to explicitly pass it, which results in more arrow functions in render and arguably worse performance. To me personally, the performance hit is negligible compared to the inconvenience of having to pass around the `x` and `y` params.

Especially the one about testing bothers me a lot and I would love to have a simple solution for this.