Render function syntax in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue render function output?

Consider this Vue 3 render function using h from vue. What will it render in the browser?

Vue

import { h } from 'vue';

export default {
  render() {
    return h('div', { class: 'container' }, [
      h('h1', 'Hello World'),
      h('p', 'This is a render function example.')
    ]);
  }
}

A <div class="container"><h1>Hello World</h1><p>This is a render function example.</p></div>

B <section class="container"><h1>Hello World</h1><p>This is a render function example.</p></section>

C <div class="container"><h1></h1><p></p></div>

D <div><h1>Hello World</h1><p>This is a render function example.</p></div>

💡 Hint

Look at the tag names and class attributes used in the render function.

The render function creates a

with class 'container' containing an

and a

with the given text. So option A matches exactly.

📝 Syntax

intermediate

Which render function syntax is correct for a Vue 3 functional component?

Select the correct render function syntax for a Vue 3 functional component that renders a

A

export default {
  render() {
    return h('button', 'Click me');
  }
}

B

export default {
  setup() {
    return () => h('button', 'Click me');
  }
}

C

export default function render() {
  return h('button', 'Click me');
}

D

export default {
  functional: true,
  render() {
    return h('button', 'Click me');
  }
}

💡 Hint

Vue 3 functional components use setup returning a render function.

In Vue 3, functional components are defined by a setup function returning a render function. Option B follows this pattern.

🔧 Debug

advanced

What error does this Vue render function produce?

Identify the error when running this Vue 3 render function code:

Vue

import { h } from 'vue';

export default {
  render() {
    return h('div', { className: 'box' }, 'Content');
  }
}

A No error, renders a div with class 'box' and text 'Content'.

B TypeError: Cannot read property 'className' of undefined.

C The class attribute is ignored; the div has no class.

D Warning: Unknown property 'className' used in render function.

💡 Hint

Vue uses 'class' attribute, not 'className' like React.

Vue render functions expect 'class' for CSS classes, not 'className'. Using 'className' triggers a warning about unknown property.

❓ state_output

advanced

What is the output after clicking the button in this Vue render function component?

Given this Vue 3 component with a render function and state, what text will the button show after one click?

Vue

import { h, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return () => h('button', { onClick: increment }, `Count: ${count.value}`);
  }
}

A Count: 1

B Count: 0

C Count: NaN

D Count: undefined

💡 Hint

Reactive refs accessed inside render functions create dependencies that trigger re-renders.

When setup() returns a render function in Vue 3, accessing count.value inside it tracks the ref as a dependency. The increment() updates the ref, triggering a re-render where the new value '1' is read and displayed.

🧠 Conceptual

expert

Which statement about Vue 3 render functions is true?

Choose the correct statement about Vue 3 render functions and their usage.

A Render functions must always use JSX syntax to work in Vue 3.

B Render functions can only return a single root element; multiple siblings cause errors.

C Render functions can return arrays of elements without wrapping them in a parent element.

D Render functions cannot access reactive state inside setup().

💡 Hint

Think about how Vue 3 handles fragments in render functions.

Vue 3 supports fragments, so render functions can return arrays of elements without a wrapper. JSX is optional, and reactive state is accessible in setup.