Use a Render Prop

People seem to forget that components (stateless components, stateless functional components or whatever you want to call them) are just functions. One function calls another function, that's function composition. In plain JavaScript we do it all the time. But when React is involved people are suddenly all like: no you can't call that function directly, you have to name it 'Component' with a capital C and use like '<Component />' and to compose two Components you have to use a HOC. It's like they all forget how to JavaScript…

As a note, it is not safe for a component using a render prop to implement shouldComponentUpdate. The problem is that the render prop may close over data that the component is unaware of. The Asana core components used to the use the render prop pattern until we discovered that issue and also realized it made tests harder to write. Now we use React.cloneElement instead.

I started today by setting out to write a response of the form &quot;Certainly you couldn&#x27;t rewrite MY HOC library to use render props, look at how it [etc]&quot; and ended today having rewritten my HOC library to use render props. In the process, I was able to dramatically simplify the API and remove about a third of the overall code.<p>So, uh, thanks.

This technique is very useful, but passing the callback as a prop is an ugly way to do it. Much cleaner to pass the callback as children [0].<p>Then, the final example looks like:<p><pre><code> &lt;Mouse&gt; {({ x, y }) =&gt; ( &lt;h1&gt;The mouse position is ({x}, {y})&lt;&#x2F;h1&gt; )} &lt;&#x2F;Mouse&gt; </code></pre> [0]: <a href="https:&#x2F;&#x2F;discuss.reactjs.org&#x2F;t&#x2F;children-as-a-function-render-callbacks&#x2F;626" rel="nofollow">https:&#x2F;&#x2F;discuss.reactjs.org&#x2F;t&#x2F;children-as-a-function-render-...</a>

My biggest issue with HOCs is the hard time you have when things are nested to high hell. A component like withThis(withThat(enrich(withState(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(....... when this component gives you an issue you begin to wonder what HOCs are really doing for you.<p>Having a render prop is slightly better but even this escape hatch isn&#x27;t foolproof and you&#x27;ll still end up needing things like onClickOutside.

Neat! Didn&#x27;t know about this concept. Any more examples of this being used somewhere?

What would the code look like to use this approach for Redux.<p>Could Redux boilerplate be reduced?

Even using the term &quot;higher order&quot; that seems like a very OOP solution, while render props is very functional and thus a better idiom for JavaScript.