React · Theory

Higher-Order Components

Theory

33/94

Higher-Order Components

An HOC is a function that takes a component and returns a new component, usually injecting props: withUser(Hello) → Hello receives user. withRouter was famous. Pattern: function withX(Wrapped) { return function Wrapper(props) { return <Wrapped {...props} extra={…} />; }; }

Hooks replaced most HOCs. withUser becomes useUser(). HOCs still appear in old code and some libraries. Mention wrapper hell (many HOCs) as the reason teams switched.

Higher-Order Components — on screen — Asha. withUser injected user. Today a custom hook useUser() is simpler.

Diagram

Parent
    │ props (read-only)
    ▼
  Child → UI

Exam tip

Define HOC + say hooks replaced most.

Example

// HOC
function withUser(Wrapped) {
  return function WithUser(props) {
    const user = { name: "Asha" };
    return <Wrapped {...props} user={user} />;
  };
}

function Hello({ user }) { return <p>{user.name}</p>; }
export default withUser(Hello);

Higher-Order Components — on screen: Asha. withUser injected user. Today a custom hook useUser() is simpler.

Short notes

Def(Component) => Component.
Now : custom hooks.
TrapHOC soup.

// HOC function withUser(Wrapped) { return function WithUser(props) { const user = { name: "Asha" }; return <Wrapped {...props} user={user} />; }; } function Hello({ user }) { return <p>{user.name}</p>; } export default withUser(Hello);

Higher-Order Components

Example

Short notes

Questions

Higher-Order Components

Example

Short notes

Questions