[couchand]

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].

Then, the final example looks like:

  <Mouse>
    {({ x, y }) => (
      <h1>The mouse position is ({x}, {y})</h1>
    )}
  </Mouse>

[0]: https://discuss.reactjs.org/t/children-as-a-function-render-...

[andrewingram]

This is how the technique was first popularised by Cheng Lou in react-motion. But it was generally found that using children made it really inaccessible to people unfamiliar with the pattern.

I've literally had good developers not understand them until I switched an example from using children to using a render prop, at which point there's a big light bulb moment.

So i'll be sticking with the render prop.

[couchand]

Maybe you could clarify it for your good developers by giving the example with children passed as a prop. Then they'll learn two things!

[andrewingram]

What's the point? Given that I prefer the aesthetics of the render prop as well?