Higher-Order Components (HOC) Pattern
Wrapping components with HOCs, forwarding props and slots, when to use HOC vs composable.
What is a Higher-Order Component
A Higher-Order Component (HOC) is a function that takes a component and returns a new component wrapping it. It adds cross-cutting behavior such as logging, auth checks, or data loading without modifying the original.
The Function Signature
An HOC is named with a with prefix by convention. It receives the wrapped component and returns an enhanced one.
function withLogging(Wrapped) {
// return a new component
}All lessons in this course
- The h() Function Deep Dive
- JSX in Vue 3 with Vite
- Dynamic Components with render Functions
- Higher-Order Components (HOC) Pattern