Stateless Functional Components for High-Density UI

Snippet

Stateless Functional Components for High-Density UI

In Vue 3, functional components are simple functions that return VNodes. Because they lack an internal instance (no 'this'), they are extremely lightweight and fast. This is the optimal pattern for 'leaf' nodes in large lists or data tables where creating thousands of full component instances would degrade performance.

snippet.js

javascript

import { h } from 'vue';
 
const RenderItem = (props, { slots }) => {
  return h('div', { class: 'item-wrapper', onClick: props.onItemClick }, [
    h('span', { class: 'label' }, props.label),
    slots.default?.()
  ]);
};
 
RenderItem.props = ['label', 'onItemClick'];
 
export default RenderItem;

vue

Breakdown

const RenderItem = (props, { slots }) => {

A pure function receiving props and context, bypassing the standard component initialization.

return h('div', ...);

Uses the hyperscript function to manually define the virtual DOM structure.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Stateless Functional Components for High-Density UI

Related