Redux Connector – Connect to redux state from within your JSX

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 &quot;render props&quot; as an alternative to Higher-Order Components. It&#x27;s interesting to note that this is actually how React-Redux worked originally [0], but it was changed to be a HOC later.<p>There&#x27;s other recent examples at [1] and [2]. Dan Abramov&#x27;s tweet at [3] describes why React-Redux changed from a render prop to a HOC in the first place, and there&#x27;s another good Twitter discussion thread at [4] (where Michael Jackson points out that this is suddenly a really popular thing to try).<p>Glancing at the source code for this implementation, I&#x27;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&#x27;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.<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;reactjs&#x2F;react-redux&#x2F;tree&#x2F;11adf721fbb3f5548c6e5f6b4999835d41807850#deprecated-api" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;reactjs&#x2F;react-redux&#x2F;tree&#x2F;11adf721fbb3f554...</a><p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;jsonnull&#x2F;redux-render" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jsonnull&#x2F;redux-render</a><p>[2] <a href="https:&#x2F;&#x2F;medium.com&#x2F;@gott&#x2F;connecting-react-component-to-redux-store-with-render-callback-53fd044bb42b" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@gott&#x2F;connecting-react-component-to-redux...</a><p>[3] <a href="https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;913712295594926080" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;913712295594926080</a><p>[4] <a href="https:&#x2F;&#x2F;twitter.com&#x2F;mjackson&#x2F;status&#x2F;915335846324092930" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;mjackson&#x2F;status&#x2F;915335846324092930</a>

The rationale sections reads:<p>&gt;Higher order components are used to wrap other components. This component enables you to use connect straightforwardly within jsx, removing much of the cognitive burden of using connect and refactoring components to use connect.<p>I don&#x27;t understand the rationale after reading that though. An example of the cognitive burden of rewriting a component to use connect would be appreciated. I write components using the connect HOC all day at work and have never felt any cognitive burden.<p>By the way, I always use decorator syntax to apply HOC&#x27;s to my components, and perhaps that is why I don&#x27;t think it&#x27;s hard to parse at all? For example:<p><pre><code> @connect(mapStateToProps, mapDispatchToProps) class MyComponent extends React.Component { &#x2F;&#x2F; etc. } export default MyComponent;</code></pre>

Mildly related - can we talk about the idiomatic way of focusing components with HoCs? I feel like I haven’t read anything about a settled convention - I know I could pass a focus prop and check to see if it’s changed in order to focus a child component, but it seems a bit heavy handed when I know I just want to focus the child of an HoC. _Some_ 3rd party HoCs I’ve used expose something like an “instance()” method that lets me access the child component via a ref, but of course some HoCs don’t.

Not a fan at all. First I&#x27;m not convinced by render props: it allows factorization, but I&#x27;d rather have the &quot;wrapping&quot; happen outside of the component (like the HoC pattern does) than inside the render().<p>But even more: this could be useful for connect()ing different parts of your component independently, but having this need is a <i>huge</i> hint that you should split your component.

It will also add an additional level to the node tree, I think.<p>Additionally, connect from react-redux seems to provide a better API for the common case where you want to export both the bare and the connected versions of a component.