How do you implement lazy loading for images and components in a React application?

Question

Accepted Answer

Lazy loading defers loading resources until they are needed, reducing initial load time.

For images, there are several approaches. The native HTML attribute loading equals lazy on img and iframe tags has been supported by modern browsers since 2020. This is the simplest and most performant solution.

The Intersection Observer API provides more control. You use this JavaScript API to detect when an element enters the viewport, then load the image dynamically.

Specialized libraries like React Lazy Load Image Component or Lozad offer advanced features like placeholders and transition effects.

For React components, React provides native React.lazy and Suspense since version sixteen point six. You wrap a dynamic import in React.lazy, then wrap the component in Suspense with a fallback.

For routes, React Router supports native lazy loading since version six point four with the lazy property on routes.

For advanced code splitting, you can use dynamic imports with webpack magic comments like webpackChunkName to name your bundles, or webpackPrefetch to preload modules likely to be used soon.

Best practices include always setting dimensions for lazy loaded images to avoid CLS. Use placeholders like dominant color, blur-up, or skeleton. Preload above-the-fold images that are visible without scrolling.