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.

Practice

1. What is the main purpose of a higher-order component (HOC) in Vue?

easy

A. To create a new Vue instance from scratch

B. To replace the Vue router with a new navigation system

C. To wrap a component and add shared logic or styling

D. To directly manipulate the DOM elements inside a component

Solution

1. Step 1: Understand what HOCs do

   Higher-order components wrap existing components to add extra features without changing the original component.

2. Step 2: Identify the correct purpose

   Among the options, only wrapping a component to add shared logic or styling matches the HOC concept.

3. Final Answer:

   To wrap a component and add shared logic or styling -> Option C

4. Quick Check:

   HOC purpose = wrap and add logic [OK]

Hint: HOCs wrap components to add features without changing them [OK]

Common Mistakes:

• Confusing HOCs with routing or Vue instance creation
• Thinking HOCs manipulate DOM directly
• Believing HOCs replace components instead of wrapping

2. Which of the following is the correct syntax to create a higher-order component in Vue 3 using the Composition API?

easy

A. const withLogger = (WrappedComponent) => { return { setup() { return () => h(WrappedComponent) } } }

B. const withLogger = (WrappedComponent) => { return WrappedComponent.setup() }

C. const withLogger = (WrappedComponent) => { return new Vue({ render: () => h(WrappedComponent) }) }

D. const withLogger = (WrappedComponent) => { return () => WrappedComponent }

Solution

1. Step 1: Review HOC syntax in Vue 3

   A HOC is a function that returns a new component wrapping the original. Using setup and render function with h() is correct.

2. Step 2: Check each option

   const withLogger = (WrappedComponent) => { return { setup() { return () => h(WrappedComponent) } } } returns a component object with setup returning a render function that renders WrappedComponent, which is correct.

3. Final Answer:

   const withLogger = (WrappedComponent) => { return { setup() { return () => h(WrappedComponent) } } } -> Option A

4. Quick Check:

   HOC returns component with setup and render [OK]

Hint: HOCs return a new component wrapping the original with setup [OK]

Common Mistakes:

• Calling setup() directly instead of returning a component
• Using new Vue() in Vue 3 Composition API
• Returning the component function without wrapping

3. Given this HOC code in Vue 3:

const withBorder = (WrappedComponent) => {
  return {
    setup() {
      return () => h('div', { style: { border: '2px solid red' } }, [h(WrappedComponent)])
    }
  }
}

const Base = { template: '
Hello
' }
const Enhanced = withBorder(Base)

What will <Enhanced /> render?

medium

A. Hello

B. Hello

C. Hello

D. Error: h() cannot wrap components

Solution

1. Step 1: Understand the HOC rendering

   The HOC wraps the WrappedComponent inside a div with a red border style.

2. Step 2: Predict the rendered output

   Rendering <Enhanced /> produces a div with red border containing the Base component's paragraph.

3. Final Answer:

   <div style="border: 2px solid red"><p>Hello</p></div> -> Option B

4. Quick Check:

   HOC adds border div around component [OK]

Hint: HOCs wrap output in extra elements or logic [OK]

Common Mistakes:

• Ignoring the wrapping div and expecting only <p>
• Thinking h() cannot wrap components
• Assuming no styles are applied

4. Identify the error in this Vue 3 HOC code:

const withTitle = (WrappedComponent) => {
  return {
    setup() {
      return () => h(WrappedComponent)
    }
  }
}

const Base = { template: '
Hi
' }
const Enhanced = withTitle(Base)

// Usage: <Enhanced title="Welcome" />

What is the problem?

medium

A. The HOC does not pass props to WrappedComponent

B. The HOC should use a class component instead

C. The Base component must be a function, not an object

D. The setup function cannot return a render function

Solution

1. Step 1: Check prop forwarding in HOC

   The HOC returns WrappedComponent but does not forward any props it receives.

2. Step 2: Understand consequence

   When using <Enhanced title="Welcome" />, the title prop is lost because it's not passed down.

3. Final Answer:

   The HOC does not pass props to WrappedComponent -> Option A

4. Quick Check:

   Props must be forwarded in HOCs [OK]

Hint: Always forward props from HOC to wrapped component [OK]

Common Mistakes:

• Forgetting to pass props in render function
• Thinking setup can't return render function
• Believing Base must be a function component

5. You want to create a higher-order component withLoading that shows a loading message while data is loading, then renders the wrapped component with the loaded data. Which approach correctly combines HOC logic with Vue 3 Composition API?

hard

A. Create a mixin that adds loading state and use it inside the wrapped component

B. Modify the wrapped component's template directly to add loading message

C. Use a global variable to track loading and conditionally render wrapped component

D. Return a component with setup() that uses ref for loading state, fetches data, and renders loading or wrapped component with props

Solution

1. Step 1: Understand HOC with loading logic

   The HOC should manage loading state internally and decide what to render based on it.

2. Step 2: Identify correct Vue 3 pattern

   Using setup with ref for loading, fetching data, and returning a render function that shows loading or wrapped component with data is correct.

3. Final Answer:

   Return a component with setup() that uses ref for loading state, fetches data, and renders loading or wrapped component with props -> Option D

4. Quick Check:

   HOC manages state and renders conditionally [OK]

Hint: Use setup with state and conditional render in HOC [OK]

Common Mistakes:

• Changing wrapped component template directly
• Using global variables for state
• Confusing mixins with HOCs