Clear my mind (and yours) about render props once and for all

Photo by Garrett Sears on Unsplash

I have seen lots of render props explanations out there in the wild but I was still not getting it 'cristal clear'. Sometimes you need to step in and figure it out by yourself. So this is my thinkering around it. Hope it serves you too.

You render your prop. That prop is a function that returns jsx.

Your render function is the one that returns the invocation of the function that got defined and passed as a prop which in turn returns the jsx that gets finally rendered.

<Hello
  render={() => (
      <p>El barto was here</p>
  )}
/>

class Hello extends Component {
  render() {
    return this.props.render();
  }
}

You abstract and simplify this by using the children prop as your function. children is what you make of it. This time it gets defined as a function and just like before it returns your jsx as well.

<Hello>
  {() => <p>El barto was here</p>}
</Hello>
/>

class Hello extends Component {
  render() {
    return this.props.children();
  }
}

Your render prop function arguments

They come from your component. From the invocation of the function in the render method. Pass as arguments to it data to use in the render of your component.
This is business as usual but since the definition is not per se in your component, but anywhere in your codebase where you are using it you can get lost. Just a fresh reminder, that helps.

<Hello>
  {(msg) => <p>{msg}</p>}
</Hello>
/>

class Hello extends Component {
  render() {
    return this.props.children("el barto was here");
  }
}

Your component props

They get passed to the component and used as usual. Nothing new here.

<Hello hide>
  {(msg) => <p>{msg}</p>}
</Hello>
/>

class Hello extends Component {
  render() {
    return !this.props.hide ? this.props.children("el barto was here") : null
  }
}

When to use it? For what?

When you get right the workings of the pattern you get to the next phase of 'still not getting it 100%' which is when to use this thing? We are almost there. We know how this thing works, we can get it when using a library that implements it. But you should use it too! We can implement it for ourselves but we are missing clarity as to when. For that we need the last piece of the puzzle right.

For this part I must say I got it thanks to Jared Palmer. With this video you get to implement a small Formik implementation that when done gives you a clear idea about the usefulness of the pattern. You get there by going through the process of turning a component that has no render prop to one that does.

Here's a companion codesandbox I made to play with the code while you are watching. Fork it, change it, finish it. The errors piece is missing. Hope this gives you a head start into really getting it once and for all. Best of luck! 🍀