Hacker News new | past | comments | ask | show | jobs | submit login

A lot of people seem to be re-discovering and re-inventing this approach, due to the recent discussions in the React community about the use of "render props" as an alternative to Higher-Order Components. It's interesting to note that this is actually how React-Redux worked originally [0], but it was changed to be a HOC later.

There's other recent examples at [1] and [2]. Dan Abramov's tweet at [3] describes why React-Redux changed from a render prop to a HOC in the first place, and there's another good Twitter discussion thread at [4] (where Michael Jackson points out that this is suddenly a really popular thing to try).

Glancing at the source code for this implementation, I'm actually rather concerned about its performance. It looks like it calls `connect()` _inside_ of a functional component. That means that every time React re-renders the parent functional component, `connect()` will generate a new HOC component, React will see that it's a different component type being rendered (because the new HOC is not the same as the old HOC), and the entire child component tree will be thrown away by the reconciliation process. This does not seem like a very performant approach.

[0] https://github.com/reactjs/react-redux/tree/11adf721fbb3f554...

[1] https://github.com/jsonnull/redux-render

[2] https://medium.com/@gott/connecting-react-component-to-redux...

[3] https://twitter.com/dan_abramov/status/913712295594926080

[4] https://twitter.com/mjackson/status/915335846324092930

I have to agree, this will create a new component type every time the function is called, definitely causing a repaint and re-render of the subtree.

The "right" way to do this is re-implement `connect` as a render-callback and then use that to create a HOC, not the other way around.


Here's a Codepen that demonstrates which component-creation methods are safely inlineable and which aren't:


GIF of repaints: https://user-images.githubusercontent.com/1571667/30631908-f...

thanks for the feedback :) - I'll have a look at optimizing it!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact