What are Higher-Order components?

A Higher-Order Component (HOC) is an advanced pattern in React for reusing component logic. It is not a feature of the React API itself, but a pattern that emerges from React’s compositional nature. A higher-order component is a function that transforms a component into another component with added functionality.

javascript

1
It is a technique in React for reusing component logic. They are used primarily for code reuse, cross-cutting concerns like authentication, and adding functionality to components without modifying their original source code.
2
HOC doesn’t modify the input component, nor does it use inheritance to copy its behaviour. Rather, a HOC composes the original component by wrapping it in a container component.

A HOC is a pure function with zero side effects.

1
Takes a component as an argument
2
Returns a new component
3
Can render the original component
4
Can add extra props to the original component

Use Cases:

1
Wrapping components with cross-cutting concerns like authentication, logging, or data fetching.
2
Sharing stateful logic or behaviour across multiple components.
3
Encapsulating reusable logic that doesn't require a specific rendering structure.

Pros:

1
Offers a clean way to reuse logic without repeating it in multiple components.
2
Enhances modularity by separating concerns into individual HOCs.
3
Works well with class-based components.
4
Supports reusing logic and behaviour without altering the original components.
5
Well-suited for sharing behaviour across components.

Cons:

1
May be less intuitive for developers new to the concept.
2
Prop conflicts can arise when multiple HOCs try to manipulate the same prop.
3
HOC nesting can lead to deep component hierarchies and affect readability.
4
Debugging might become complex when the component structure becomes convoluted.

Difficulty: 5/10

Topics: reusability, props injection, composition

Scenario Questions

0-2 years experience

1
We have a simple Button component and we want to add logging of clicks without modifying the original component. How would you use a higher-order component to achieve this?
2
If you wrap a component with an HOC that adds a prop, what happens to the component's displayName and why might that matter for debugging?

2-5 years experience

1
Our team introduced an HOC to provide authentication data to several pages, but after the change some pages stopped receiving updates when the auth state changed. What could be causing this and how would you fix it?
2
When deciding between using an HOC versus render props for sharing form state, what trade‑offs would you consider in a medium‑size codebase?

5-8 years experience

1
We have a large application that heavily relies on HOCs for theming and data fetching. As the app scales, we notice increased bundle size and slower render times. How would you evaluate the impact of HOCs and what alternatives might you propose?
2
Describe how you would refactor a hierarchy of nested HOCs to improve readability and maintainability while preserving type safety in a TypeScript project.

8+ years experience

1
Our organization is migrating a legacy codebase that uses many class‑based HOCs to a modern hook‑based architecture. What strategy would you use to plan and execute this migration across multiple teams?
2
How would you design a reusable HOC library that can be safely shared across several products with differing build pipelines and versioning constraints?

Follow-up Questions

❓Can you walk me through the code you’d write for that HOC?
❓What are the potential pitfalls with prop naming in this pattern?
❓How would you test the HOC to ensure it doesn’t break the wrapped component?