How to Use a Higher-Order Component (HOC) the Right Way in React

What is a HOC?

A Higher-Order Component is a function that:

• Takes a React component as input
• Returns a new React component with extra features

Example of a HOC

const withAdminRole = (WrappedComponent) => {
  // takes a component as argument and returns new component
  return (props) => <WrappedComponent {...props} role="admin" />;
};

const WelcomeUser = ({ name, role }) => {
  return <p>Welcome, {name}! Your role is: {role}</p>;
};

❌ Inefficient Way to Use It

// Don't do this
const UserWithRole = () => withAdminRole(WelcomeUser);

<UserWithRole name="Apu" />;

What’s wrong here?

• withAdminRole(WelcomeUser) is called every time <UserWithRole /> renders
• This creates a new component on every render
• React can’t optimize this
• It can cause unnecessary re-renders

✅ Efficient Way to Use It

// Do this instead
const UserWithRole = withAdminRole(WelcomeUser);

<UserWithRole name="Apu" />;

What’s right here?

• withAdminRole(WelcomeUser) is called only once,
• UserWithRoleis now a stable component
• React can optimize performance
• Your code is cleaner and safer

Simple Rule

Always assign the result of a HOC to a constant. Don’t call the HOC inside a component or inside render.