Nice post comparing these three approaches and detailing why you should use the version with hooks.
// #1 - Hooks
const MyComponent = () => {
const mousePosition = useMouse();
// mousePosition.x, mousePosition.y
}
// #2 - Render Props
const MyComponent = () => {
return (
<Mouse>
{({ x, y }) => {
// ...
}}
</Mouse>
)
}
// #3 - HOCs
const MyComponent = ({ x, y }) => {
// ...
}
export default withMouse(MyComponent);
Having been in the React game for quite some time, and having seen all three variants come to life, I agree wholeheartedly with the conclusion:
When deciding between hooks, render props and higher-order components, always go with hooks wherever possible.