What are Higher-Order Components (HOCs)?

Short answer: A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional props or behavior.

Explain a bit more

Purpose: HOCs are used for code reuse, logic abstraction, and enhancing components with common functionality (e.g., authentication, data fetching, etc.). How it works: HOCs are like decorators that wrap a component and add extra logic before rendering the component. Example: function withLoading(Component) { return function WithLoading(props) {

Example code

if (props.isLoading) {
return <div>Loading...</div>;
}
return <Component {...props} />; }; }
const MyComponent = ({ data }) => <div>{data}</div>;
const MyComponentWithLoading = withLoading(MyComponent); In this example, withLoading is a higher-order component that adds loading state to MyComponent.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.