Performance Decorators

@Lazy(placeholder?)

Defers rendering until the component scrolls into the viewport. A placeholder element is shown while the component is off-screen — preventing unnecessary work and keeping the initial render fast.

import { Lazy, Component } from '@praxisjs/decorators'

@Lazy(300)  // 300px placeholder height while off-screen
@Component()
class HeavyChart extends StatefulComponent {
  render() {
    return <canvas id="chart" />
  }
}

The argument is the placeholder height in pixels. Using a fixed height prevents layout shift when the component eventually renders.

Scoped to a scroll container

By default, intersection is observed against the viewport. To scope it to a specific scrollable element, pass an options object:

const listRef = { current: null as HTMLDivElement | null }

@Lazy({ placeholder: 300, root: listRef, rootMargin: '100px' })
@Component()
class HeavyRow extends StatefulComponent { /* ... */ }

// In the parent render:
<div ref={(el) => { listRef.current = el }} style="overflow-y:auto;height:400px">
  <HeavyRow />
</div>

Good use cases: components below the fold, heavy data visualizations, third-party widgets.

Large list virtualization

For virtualizing long lists, use the VirtualList composable from @praxisjs/composables. It exposes reactive signals (visibleItems, totalHeight, offsetTop, offsetBottom) that you render with normal JSX — no custom renderItem callback, no special conventions.

→ See VirtualList for the full guide and examples.