LazyComponent

Name: LazyComponent
Availability: InStock
Author: Lynx

Render child content only when it enters the viewport.

115|10|Updated Jan 15, 2026

Search Tags:#performance #frontend #react #virtualization #lazy-loading #exposure

Ready to run

npx skills add https://github.com/lynx-family/lynx-ui --skill lazycomponent

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: LazyComponent
Source: https://github.com/lynx-family/lynx-ui/tree/main/packages/lynx-ui-lazy-component
Command: npx skills add https://github.com/lynx-family/lynx-ui --skill lazycomponent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a concise mechanism to render child content only when it enters the viewport, improving initial render performance in complex UIs.

Core Features & Use Cases

On-demand rendering: Render children only after exposure to viewport, reducing initial load time.
Optional unload: If unloadable is enabled, free memory when content exits the viewport.
Flexible exposure controls: Supports adjustable exposure margins via top, bottom, left, and right props.
Usage scenarios: Ideal for long lists, lazy-loaded components inside ScrollView, and virtualization patterns.

Quick Start

Place a LazyComponent with unique scene and pid around your content to enable on-viewport loading.

Frequently Asked Questions about LazyComponent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I lazy-load content only when it enters the viewport in React?▼

To lazy-load content in React, you can use a visibility-based rendering component that delays mounting child elements until their node enters the viewport, reducing initial render time. It requires a unique pid and scene to identify each item.

What is the best way to improve initial render performance in long scrollable lists?▼

Improving initial render performance in long lists is achieved through on-demand rendering and virtualization patterns. By exposing content only upon viewport entry and applying an estimatedStyle for sizing, you prevent heavy upfront DOM mounting.

Can I free memory by unloading React components when they scroll out of view?▼

Yes, you can free memory when components scroll out of view by enabling an unloadable flag. This feature deallocates off-screen content, making it ideal for managing memory in extensive virtualization scenarios.

How do I adjust the exposure margin for lazy-loaded components?▼

You adjust the exposure margin for lazy-loaded components by configuring the top, bottom, left, and right props. These flexible exposure controls determine how early content renders before it fully enters the visible viewport.

Do I need an estimated size to lazy-load items inside a ScrollView?▼

Yes, you need an estimatedStyle for sizing to lazy-load items inside a ScrollView. This estimated dimension allows the container to reserve space and calculate visibility accurately before the actual content renders.