Higher-order components concept in Vue - Performance & Optimization

Performance: Higher-order components concept

MEDIUM IMPACT

This concept affects rendering speed and responsiveness by adding extra component layers in the Vue component tree.

Wrapping a base component with a higher-order component (HOC) to add behavior

Vue

const useLogger = (props) => {
  watchEffect(() => {
    console.log('Rendering component with props:', props);
  });
};

const Button = defineComponent({
  props: { label: String },
  setup(props) {
    useLogger(props);
    return () => h('button', null, props.label);
  }
});

// Usage in template
// <Button label="Click me" />

Using a composable function inside the component avoids extra wrapper components, reducing component tree depth and reactive overhead.

📈 Performance GainRemoves extra component layer, reducing reactive tracking and improving interaction responsiveness.

Wrapping a base component with a higher-order component (HOC) to add behavior

Vue

const withLogger = (WrappedComponent) => {
  return {
    props: WrappedComponent.props,
    setup(props, { slots }) {
      console.log('Rendering component with props:', props);
      return () => h(WrappedComponent, props, slots.default ? slots.default() : undefined);
    }
  };
};

const EnhancedButton = withLogger(Button);

// Usage in template
// <EnhancedButton label="Click me" />

This HOC creates a new component wrapper on each render, adding extra layers and causing more Vue reactivity tracking and rendering overhead.

📉 Performance CostAdds 1 extra component layer per use, increasing DOM depth and reactive updates, causing slower INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
HOC wrapping base component	Increases component nodes by 1 per use	Triggers reactive updates on wrapper and base	Slightly higher due to deeper tree	[!] OK
Composable function inside component	No extra component nodes	Reactive updates only on base component	Lower paint cost due to simpler tree	[OK] Good

Rendering Pipeline

Higher-order components add extra component nodes in the Vue virtual DOM tree, increasing the work during the render and patch phases.

→Virtual DOM Render

→Reactive Tracking

→Component Patch

⚠️ BottleneckExtra component layers increase reactive dependency tracking and virtual DOM diffing cost.

Core Web Vital Affected

INP

This concept affects rendering speed and responsiveness by adding extra component layers in the Vue component tree.

Optimization Tips

1Avoid unnecessary higher-order components to keep the component tree shallow.

2Use composable functions to share logic without adding extra component wrappers.

3Monitor component tree depth in DevTools to spot performance bottlenecks.

Performance Quiz - 3 Questions

What is a main performance drawback of using higher-order components in Vue?

A They reduce bundle size significantly

B They eliminate the need for reactive tracking

C They add extra component layers increasing render and reactive overhead

D They improve Largest Contentful Paint (LCP)

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for extra component render calls and reactive effect executions.

What to look for: Check the flame chart for extra component layers and longer render times indicating overhead from HOCs.

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