react-lazy-load is a React component designed to defer the loading of content, making web applications more performant by only rendering elements when they become visible within the viewport. The current stable version is 4.0.1, which includes support for React 18 and TypeScript, and internally utilizes the browser's Intersection Observer API for efficient detection of visibility. This library has seen an active development cadence, with a significant v4 major release focused on modernizing its approach by removing external dependencies and leveraging native browser capabilities. Its key differentiators include simplicity, automatic detection of scrolling containers, and a focus on performance by avoiding manual scroll watching in favor of Intersection Observer.
npm install react-lazy-loadVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates basic usage of the LazyLoad component, showing how to wrap an image, specify height, use `offset` to load content before it's fully visible, and `threshold` for a specific visibility percentage (v4+), including a callback for content visibility.
Remove `debounce` and `throttle` props from your `LazyLoad` components. The Intersection Observer API inherently handles performance efficiently.
Consolidate individual offset props into the single `offset` prop using a number or CSS margin-like string. For example, change `offsetTop={100}` to `offset={100}` or `offset={'100px 0 0 0'}`.Update your CSS selectors from `.lazy-load` to `.LazyLoad` and from `.lazy-load-visible` to `.is-visible`.
If migrating from v3, replace the old `threshold` usage with `offset`. If using v4+, `threshold` should be a number between 0 and 1 and typically requires `width` and `height` props for accurate calculation by the browser.
Ensure your project's React and React DOM versions are `^17.0.0 || ^18.0.0` to satisfy peer dependency requirements.
Ensure you are running in a modern browser environment or provide a polyfill for Intersection Observer if supporting older browsers.
Always set the `height` and/or `width` props on the `<LazyLoad>` component, especially when using `threshold`, to give the browser proper dimensions for observation.
Upgrade to v4.0.0 or later to use the `threshold` prop with Intersection Observer semantics, or switch to using the `offset` prop for earlier v3 versions.
Verify that your `react` and `react-dom` versions satisfy the `react-lazy-load` peer dependency (`^17.0.0 || ^18.0.0` for v4+) and resolve any duplicate React installations in your `node_modules`.