{"id":15191,"library":"react-lazy-load","title":"React Lazy Load Component","description":"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.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/loktar00/react-lazy-load","tags":["javascript","react","reactjs","react-component","load","lazy","typescript"],"install":[{"cmd":"npm install react-lazy-load","lang":"bash","label":"npm"},{"cmd":"yarn add react-lazy-load","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-lazy-load","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component is a default export.","wrong":"import { LazyLoad } from 'react-lazy-load'; // Not a named export, it's the default.","symbol":"LazyLoad","correct":"import LazyLoad from 'react-lazy-load';"},{"note":"Type import for component props, available since v4 with TypeScript support.","symbol":"LazyLoadProps","correct":"import type { LazyLoadProps } from 'react-lazy-load';"},{"note":"CommonJS `require` syntax for older Node.js environments or projects not using ESM.","wrong":"import LazyLoad from 'react-lazy-load';","symbol":"require","correct":"const LazyLoad = require('react-lazy-load');"}],"quickstart":{"code":"import React from 'react';\nimport LazyLoad from 'react-lazy-load';\n\nconst MyImageGallery = () => (\n
\n

My Lazy Loaded Gallery

\n

Scroll down to see images load as they enter the viewport.

\n
\n {/* Placeholder to create scroll space */}\n Content above the fold.\n
\n console.log('Image 1 loaded!')}>\n Placeholder Image 1\n \n
\n {/* More placeholder content */}\n More content to scroll past.\n
\n console.log('Image 2 loaded!')}>\n Placeholder Image 2\n \n
\n {/* Final placeholder content */}\n Even more content at the bottom.\n
\n
\n);\n\nexport default MyImageGallery;","lang":"typescript","description":"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."},"warnings":[{"fix":"Remove `debounce` and `throttle` props from your `LazyLoad` components. The Intersection Observer API inherently handles performance efficiently.","message":"With the release of v4.0.0, the `debounce` and `throttle` options have been entirely removed as they are no longer necessary due to the adoption of the Intersection Observer API.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"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'}`.","message":"In v4.0.0, the `offset` prop's behavior changed significantly. It now accepts a number (for uniform offset) or a CSS-like string (e.g., '10px 20px 0 0' for top, right, bottom, left offsets), and individual `offset*` props (e.g., `offsetTop`) were removed.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update your CSS selectors from `.lazy-load` to `.LazyLoad` and from `.lazy-load-visible` to `.is-visible`.","message":"Version 3.0.0 introduced breaking changes to the default CSS class names used by the component. Old classes like `.lazy-load` and `.lazy-load-visible` were renamed.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"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.","message":"The `threshold` prop was deprecated in v3.0.0 in favor of `offset`. However, a new `threshold` prop was *re-introduced* in v4.0.0 with a different meaning, tied to the Intersection Observer API (a number between 0 and 1 indicating percentage of visibility). Do not confuse the old deprecated `threshold` with the new v4 `threshold`.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure your project's React and React DOM versions are `^17.0.0 || ^18.0.0` to satisfy peer dependency requirements.","message":"Beginning with v4.0.0, `react-lazy-load` requires React 17 or later as a peer dependency. Previous versions had different React peer dependency requirements.","severity":"breaking","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure you are running in a modern browser environment or provide a polyfill for Intersection Observer if supporting older browsers.","cause":"The browser or environment where the component is rendered does not support the Intersection Observer API, which v4+ of `react-lazy-load` relies on.","error":"TypeError: Cannot read properties of undefined (reading 'IntersectionObserver')"},{"fix":"Always set the `height` and/or `width` props on the `` component, especially when using `threshold`, to give the browser proper dimensions for observation.","cause":"This usually happens when `height` or `width` props are not set, preventing the Intersection Observer from accurately determining the element's dimensions and visibility.","error":"LazyLoad component's content is visible immediately, even if off-screen."},{"fix":"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.","cause":"This warning indicates you are likely using a version between 3.0.0 and 4.0.0, where the `threshold` prop was deprecated in favor of `offset`.","error":"Warning: Prop `threshold` was not expected. Did you mean `offset`?"},{"fix":"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`.","cause":"This generic React error can occur if `react` and `react-dom` peer dependencies are not met or if multiple versions of React are being loaded, causing context issues for the component.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}