Higher-Order Components
Explore the concept of higher-order components in React to improve component reusability and abstraction. Learn how HOCs manage state and conditional rendering to create enhanced, composable React class components. This lesson helps you build flexible components and understand their role in advanced React programming.
What are Higher-order components?
Higher-order components (HOC) are an advanced concept in React. HOCs are an equivalent to higher-order functions. They take any input, usually a component, but also optional arguments, and return a component as output. The returned component is an enhanced version of the input component, and it can be used in your JSX.
HOCs are used for different use cases. They can prepare properties, manage state, or alter the representation of a component. One case is to use a HOC as a helper for a conditional rendering. Imagine you have a List component that renders a list of items or nothing, because the list is empty or null. The HOC could shield away that the list would render nothing when there is no list. On the other hand, the plain List component doesn’t need to bother anymore about an non existent list, as it only cares about rendering the list.