5 ms·
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
by couchand 9y ago
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-callbacks/626 https://discuss.reactjs.org/t/children-as-a-function-render-...
- andrewingram 9y agoThis 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 9y agoMaybe 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 9y agoWhat's the point? Given that I prefer the aesthetics of the render prop as well?