h function for creating vnodes in Vue - Performance & Optimization

Performance: h function for creating vnodes

MEDIUM IMPACT

This affects how Vue creates virtual DOM nodes, impacting rendering speed and memory usage during component updates.

Creating virtual DOM nodes in Vue components

Vue

import { h } from 'vue';

const items = ['Item 1', 'Item 2', 'Item 3'];

export default {
  render() {
    return h('div', {}, items.map(item => h('p', {}, item)));
  }
};

Using array mapping to generate vnodes reduces code repetition and allows Vue to optimize vnode diffing efficiently.

📈 Performance GainReduces CPU work by batching vnode creation, improving update speed and lowering interaction delay.

Creating virtual DOM nodes in Vue components

Vue

import { h } from 'vue';

export default {
  render() {
    return h('div', {}, [
      h('p', {}, 'Item 1'),
      h('p', {}, 'Item 2'),
      h('p', {}, 'Item 3')
    ]);
  }
};

Manually creating many vnode calls without abstraction causes repetitive vnode creation and can lead to more CPU work on updates.

📉 Performance CostTriggers multiple vnode creations and re-renders, increasing CPU usage and blocking rendering for tens of milliseconds on large lists.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual multiple h calls without abstraction	Many vnode creations	Multiple reflows on updates	Higher paint cost due to frequent DOM changes	[X] Bad
Using array map to batch vnode creation	Fewer vnode creations, batched	Single reflow per update batch	Lower paint cost with minimal DOM changes	[OK] Good

Rendering Pipeline

The h function creates virtual DOM nodes which Vue uses to compare with previous nodes. This diffing process determines minimal DOM updates.

→Virtual DOM Creation

→Diffing

→DOM Updates

⚠️ BottleneckVirtual DOM Creation and Diffing when many vnodes are created inefficiently

Core Web Vital Affected

INP

This affects how Vue creates virtual DOM nodes, impacting rendering speed and memory usage during component updates.

Optimization Tips

1Batch vnode creation using arrays or loops to reduce CPU overhead.

2Avoid repetitive manual vnode calls for similar elements.

3Profile vnode creation to detect and optimize slow rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of using the h function efficiently in Vue?

A Triggers more reflows for better visuals

B Increases bundle size significantly

C Reduces CPU work by minimizing vnode creation

D Blocks rendering for longer to ensure accuracy

DevTools: Performance

How to check: Record a performance profile while interacting with the component, then inspect the scripting and rendering sections for vnode creation and DOM update times.

What to look for: Look for long scripting tasks related to vnode creation and multiple layout/repaint events indicating inefficient vnode handling.

Practice

1. What is the primary purpose of the h function in Vue?

easy

A. To define CSS styles for components

B. To directly manipulate the DOM elements

C. To fetch data from an API

D. To create virtual nodes representing elements or components

Solution

1. Step 1: Understand the role of h in Vue

   The h function is used to create virtual nodes (vnodes) which represent elements or components in Vue's virtual DOM.

2. Step 2: Differentiate from other functions

   It does not manipulate the real DOM directly, fetch data, or style components. Its main role is to build the virtual DOM structure.

3. Final Answer:

   To create virtual nodes representing elements or components -> Option D

4. Quick Check:

   h function = create virtual nodes [OK]

Hint: Remember: h builds virtual nodes, not real DOM [OK]

Common Mistakes:

• Confusing h with direct DOM manipulation
• Thinking h fetches data
• Assuming h styles components

2. Which of the following is the correct syntax to create a div element with the h function and a class of "container"?

easy

A. h('div', ['class', 'container'])

B. h('div', { class: 'container' })

C. h('div', 'class', 'container')

D. h('div', { 'className': 'container' })

Solution

1. Step 1: Recall the h function signature

   The h function takes the tag name as the first argument and an object of props as the second argument.

2. Step 2: Identify correct props syntax

   Vue uses class (not className) as the key for CSS classes in the props object.

3. Final Answer:

   h('div', { class: 'container' }) -> Option B

4. Quick Check:

   h(tag, props) with class key = A [OK]

Hint: Props are an object; use { class: 'name' } [OK]

Common Mistakes:

• Using 'className' instead of 'class'
• Passing class as separate string arguments
• Using array instead of object for props

3. What will be the rendered output of this Vue render function snippet?

return h('ul', null, [
  h('li', null, 'Apple'),
  h('li', null, 'Banana'),
  h('li', null, 'Cherry')
])

medium

A. AppleBananaCherry

B. AppleBananaCherry

C. AppleBananaCherry

D. Error: Children must be strings

Solution

1. Step 1: Understand the structure created by h

   The outer h creates a ul element with an array of li children nodes.

2. Step 2: Recognize the children rendering

   Each li vnode contains a string child representing the fruit name, so the final HTML is a list with three li items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   h with array children = nested elements [OK]

Hint: Array children create nested elements inside parent [OK]

Common Mistakes:

• Thinking children array concatenates text
• Expecting error for array children
• Missing the parent <ul> element

4. Identify the error in this usage of the h function:

return h('button', { onclick: () => alert('Clicked!') }, 'Click me')

medium

A. The event name should be lowercase: 'onclick'

B. The event handler should be passed as 'onClick' but as a string

C. The event handler should be passed as 'onClick' with capital C

D. The event handler should be passed as 'onClick' but inside an array

Solution

1. Step 1: Recall Vue event listener naming in h

   Vue expects event listeners in props to be prefixed with 'on' and camelCase event name, e.g., 'onClick'.

2. Step 2: Identify the incorrect casing

   The code uses 'onclick' with lowercase 'c', which Vue does not recognize as an event listener.

3. Final Answer:

   The event handler should be passed as 'onClick' with capital C -> Option C

4. Quick Check:

   Event props use camelCase event names [OK]

Hint: Use camelCase event names like 'onClick' in props [OK]

Common Mistakes:

• Using lowercase event names
• Passing event handler as string
• Wrapping handler in array unnecessarily

5. How would you use the h function to create a ul list from this array of fruits, but only include fruits with names longer than 5 characters?

const fruits = ['Apple', 'Banana', 'Fig', 'Cherry']

hard

A. h('ul', null, fruits.filter(f => f.length > 5).map(f => h('li', null, f)))

B. h('ul', null, fruits.map(f => f.length > 5 ? h('li', null, f) : f))

C. h('ul', null, fruits.map(f => h('li', null, f.length > 5)))

D. h('ul', null, fruits.filter(f => f.length > 5))

Solution

1. Step 1: Filter fruits by length

   Use filter to keep only fruits with names longer than 5 characters.

2. Step 2: Map filtered fruits to li vnodes

   Use map to convert each filtered fruit into an li vnode with the fruit name as child.

3. Step 3: Pass the array of li vnodes as children to ul

   This creates a ul with only the desired fruits as list items.

4. Final Answer:

   h('ul', null, fruits.filter(f => f.length > 5).map(f => h('li', null, f))) -> Option A

5. Quick Check:

   Filter then map to
6. nodes = A [OK]

Hint: Filter first, then map to <li> nodes inside h [OK]

Common Mistakes:

• Mapping without filtering includes unwanted items
• Passing booleans or nulls as children
• Passing raw strings array without wrapping in <li>