React: Hooks vs. Render Props vs. Higher-Order Components

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.

React: Hooks vs. Render Props vs. Higher-Order Components →