How to Implement a Higher Order Component in React

A Higher Order Component is a function that takes a component as an argument and returns a new enhanced component. It adds behavior or data to the wrapped component without modifying the original. HOCs follow the same pattern as higher order functions in JavaScript, like map and filter, but applied to React components.

Before writing an HOC, identify behavior that multiple components share. Common candidates include logging when a component mounts, checking authentication before rendering, adding a loading spinner while data is being fetched, or providing access to certain data like the current theme or user. This shared behavior is what the HOC will inject.

Write a function whose name starts with 'with' by convention, such as withAuth or withLoading. This function accepts the component to be enhanced, typically named WrappedComponent, as its parameter. Inside the function, define and return a new functional component.

Inside the new component returned by the HOC, implement the shared logic. This might involve calling hooks, making API calls, reading context, or adding event listeners. This is where the HOC adds its value, doing work that the wrapped component does not need to know about.

Inside the returned component, render the original WrappedComponent. Pass all the props the HOC received down to WrappedComponent using the spread operator so it receives everything its parent intended to send. Also pass any additional props the HOC wants to inject, such as the authenticated user object or the loaded data.

For easier debugging in React DevTools, set the displayName property on the new component returned by the HOC. A good convention is to set it to 'WithAuth(WrappedComponent.displayName)'. Without this, all components wrapped by the HOC appear with the same generic name in DevTools, making them hard to distinguish.

To use the HOC, wrap your component with it when exporting. Write export default withAuth(Dashboard). The Dashboard component itself remains simple and focused on its own concern. The HOC handles the authentication check transparently. You can chain multiple HOCs together but be careful not to create deeply nested wrapping.

HOCs were the primary pattern for reusing component logic before hooks were introduced. Today, custom hooks accomplish much of what HOCs did with less complexity and no added component nesting. Prefer custom hooks for sharing stateful logic in modern React. HOCs are still useful for wrapping third-party components that you cannot modify or for adding render-level concerns like authorization gates.