@rkenmi - React HOC vs. Hooks

React HOC vs. Hooks


Should we use Higher Order Components or Hooks in React?

React HOC vs. Hooks


Back to Top

Updated on September 27, 2020

HOC

React HOC (Higher Order Components) are basically a function that takes a component and returns a new component. props are passed in as an argument to this function. React HOCs are generally used for:

  • Components that share a common layout
  • Components that need to be connected to some middleware (i.e. logging, reducer/Redux)
  • Components that don't have many props dependencies

Hooks

Hooks are introduced in React 16.8. It allows you to create a React class in a functional way, and allows you to work with props for individual components. Hooks are generally used to:

  • Reuse stateful logic without changing your component hierarchy
  • Split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)
  • Pave the way for optimized code compilation

Is one better than the other?

The answer is simply put, no. Using React HOC is just one way to share behavior across multiple React classes that do not have heavy dependencies on props, while React Hooks are just the preferred way to write React components, due to advantages such as re-usability of stateful logic.


Article Tags:
reacthochooks