Render child content only when it enters the viewport.
npx skills add https://github.com/lynx-family/lynx-ui --skill lazycomponent
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
Provide a concise mechanism to render child content only when it enters the viewport, improving initial render performance in complex UIs.
Place a LazyComponent with unique scene and pid around your content to enable on-viewport loading.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
rseAssign and retrieve unique identifiers for software development tasks.
alexeygrigorevCount list items and generate numbered lists starting at 1.
agentuityIntegrate Agentuity frontend hooks and auth providers into React apps.
PatternsDevImplement windowing in React lists and grids using react-window.
