Skip to main content
Only one section mounts at a time, through a global first-in-first-out queue. The pattern comes from a page with seven chart sections that crashed mid-range Android devices by mounting them all at once.

​
Install

​
How it works

Each LazySection places a sentinel and watches it with an IntersectionObserver. When the sentinel approaches the viewport the section joins the mount queue; the queue releases one section at a time. A section that travels far enough past the viewport unmounts again, which is what keeps a long page’s memory flat rather than monotonically rising. The load margin adapts to the screen: 100px on a narrow viewport, 300px otherwise. A phone gets less runway because it has less memory to spend on speculative mounting.

​
Props

Earlier documentation listed section, priority, unmountDistance and disabled. None of those is the current API — the name is label, and ordering comes from the queue and document order rather than from a priority number.
The default fallback is a pulsing skeleton carrying role="status" and an accessible label, so a screen reader announces that something is loading rather than reading nothing.

​
Memory pressure

useMemoryPressure watches JavaScript heap usage and reports when it crosses a threshold. It is a Chrome-only API, and the hook degrades to a no-op elsewhere rather than throwing.
Because it is a no-op on browsers without the API, isUnderPressure is false there — treat it as a hint that lets you do better on the browsers that report, not as a guarantee you are under the limit.
The design portal hosts a live demonstration of sequential mounting — the first section loads eagerly while the rest wait in the queue and mount one at a time behind skeletons. That interactive React surface does not port to this documentation site.