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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.