Solving the problems of Higher Order Components without throwing the baby out with the bathwater
Chang Wang
3813

With given HOC and given Component, which are not designed to work together —use Adapter.

compose(
withMouse,
mapProps(fromWithMouseToMouseAdapter)
)(({ mouse }) => { ... }))

I can see the problem from another angle —original article said that issues are Indirection and Naming collision.

Indirections, comes from the fact that one component is not built for another one. And they are trying to solve that problem by building components that ARE build specially for a case. A quite bad idea.

Collisions are more about clashing between HOCs, and proposed namespace function solves it just ideally.

And renderProp result — look like it is still the same “Component”, with fixed names as arguments. You just pass it as prop, not as chiuldren. So result is not a “solution”, but, at the same time, result is absolutely incomposable/reusable now. No new ways opened, a lot of existing ones — closed. So there is no wins, only loses.

PS: There are another use cases, where renderProp can shine. But — everything can shine.

Like what you read? Give Anton Korzunov a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.