How can I implement lazy loading for images in my React app?

How can I implement lazy loading for images in my React app?

You can use the Intersection Observer API or libraries like 'react-lazyload' to implement lazy loading.

Can you show me a code example using Intersection Observer?

Sure! Here's a simple example:

import React, { useEffect, useRef, useState } from 'react';

const LazyImage = ({ src, alt }) => {
    const imgRef = useRef();
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    observer.disconnect();
                }
            });
        });
        observer.observe(imgRef.current);
        return () => observer.disconnect();
    }, []);

    return <img ref={imgRef} src={isVisible ? src : ''} alt={alt} />;
};

This will load the image only when it comes into the viewport.

What if I want to add a placeholder while the image is loading?

You can add a placeholder by using a state variable to control the image source. Here's an updated example:

const LazyImage = ({ src, alt, placeholder }) => {
    const imgRef = useRef();
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    observer.disconnect();
                }
            });
        });
        observer.observe(imgRef.current);
        return () => observer.disconnect();
    }, []);

    return <img ref={imgRef} src={isVisible ? src : placeholder} alt={alt} />;
};

This way, the placeholder will be shown until the actual image is loaded.