Higher-order components concept in Vue - Step-by-Step Execution

Concept Flow - Higher-order components concept

Start with Base Component

↓

Create HOC Function

↓

HOC Takes Base Component

↓

Return New Component Wrapping Base

↓

Use New Wrapped Component in App

↓

Render Wrapped Component with Added Behavior

The flow shows how a higher-order component (HOC) takes a base component, wraps it with extra features, and returns a new component used in the app.

Execution Sample

Vue

import { h } from 'vue';
const withLogger = (Wrapped) => {
  return {
    setup() {
      console.log('Component mounted');
      return () => h(Wrapped);
    }
  };
};

This code defines a HOC that logs a message when the wrapped component mounts and renders the wrapped component.

Execution Table

Step	Action	Evaluation	Result
1	Call withLogger with BaseComponent	withLogger(BaseComponent)	Returns new component wrapping BaseComponent
2	Render new component	setup() runs	Logs 'Component mounted' to console
3	Render function returns h(BaseComponent)	BaseComponent rendered inside wrapper	BaseComponent UI appears on screen
4	User interacts with component	No change in HOC behavior	BaseComponent handles interaction as usual
5	Component unmounts	No special cleanup in HOC	Component removed from DOM

💡 Rendering completes; HOC adds logging but does not alter base component's UI or lifecycle beyond mount log.

Variable Tracker

Variable	Start	After 1	After 2	Final
Wrapped	BaseComponent	BaseComponent	BaseComponent	BaseComponent
Returned Component	undefined	HOC wrapping BaseComponent	HOC wrapping BaseComponent	HOC wrapping BaseComponent

Key Moments - 3 Insights

Why does the HOC log 'Component mounted' only once?

Because the log happens inside the setup() function which runs once when the component mounts, as shown in execution_table step 2.

Does the HOC change the UI of the base component?

No, the HOC returns a render function that simply renders the base component, so the UI stays the same (execution_table step 3).

Can the HOC add new props or behavior to the base component?

Yes, HOCs can add props or wrap behavior, but in this example it only logs on mount without changing props (see code and execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 2?

A The user interacts with the component

B The base component is unmounted

C The HOC logs 'Component mounted' to the console

D The HOC returns the base component without rendering

💡 Hint

Check the 'Action' and 'Result' columns in execution_table row 2

At which step does the base component actually render inside the HOC?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look for when the render function returns h(BaseComponent) in execution_table

If the HOC added a prop to the base component, how would the execution table change?

A Step 3 would show the base component rendered with extra props

B Step 2 would log a different message

C Step 5 would show cleanup of added props

D Step 1 would not call withLogger

💡 Hint

Adding props affects rendering, so check the 'Evaluation' and 'Result' in step 3

Concept Snapshot

Higher-order components (HOCs) are functions that take a base Vue component and return a new component wrapping it.
They add extra behavior or props without changing the original component code.
HOCs use the setup() function to add logic like logging or state.
The returned component renders the wrapped component inside.
Use HOCs to reuse logic across components cleanly.

Full Transcript

Higher-order components in Vue are functions that accept a base component and return a new component that wraps it. This wrapping component can add extra behavior, such as logging when the component mounts. The example code defines a withLogger HOC that logs a message inside the setup function and renders the wrapped component. The execution table shows the steps: calling the HOC returns a new component, rendering triggers the setup and logs the message, then the base component renders inside the wrapper. Variables track the wrapped component and the returned component. Key moments clarify that the HOC logs only on mount, does not change the UI, and can add behavior or props if desired. The visual quiz tests understanding of these steps. The snapshot summarizes that HOCs help reuse logic by wrapping components without modifying them directly.