2.2.4: Higher-Order Components

Learning Objectives

  1. Higher-order components (HOCs) allow us to re-use component logic across multiple components

  2. HOCs are not always necessary, especially in relatively simple apps like ours

Introduction

Higher-order components (HOCs) are components that receive 1 or more other components as input and return an "augmented" version of those components. Augmented features can include setup and teardown functionality from component lifecycle methods or UI features such as wrapping child components in a standard UI.

The React team has an official guide to higher-order components on their website. There is no need to read it in detail now, but if you found yourself repeating common patterns across multiple components, consider using HOCs to reduce redundant code and increase maintainability of your app.

For now we will mostly be consumers of HOCs that others have created. As we get more experienced with React we may find a need to create new HOCs of our own.

Last updated