Reactjs – react photo album infinite scroll

What went wrong:

When new photos were added to the state, the component re-rendered, causing the gallery to scroll back to the top, disrupting the user’s scroll experience.

What was done to prevent it:

useEffect was used to save the current scroll position and restore it after new images are loaded. useCallback was applied to optimize the image fetching function, preventing unnecessary re-fetching. An IntersectionObserver triggers fetching more images when the last photo is visible, ensuring smooth infinite scrolling without resetting the scroll position.

Since the scrolling occurred inside the PhotoAlbum component, not the entire page, the scroll position is now tracked using the scrollTop of the galleryRef, which represents the scrollable container. Before fetching new images, the scroll position is saved, and after the images are loaded, it is restored to prevent the scroll from resetting. The PhotoAlbum component is wrapped in a scrollable container with a fixed height and overflowY: auto.

import React, { useState, useCallback, useRef, useEffect } from 'react';
import PhotoAlbum from 'react-photo-album';

const PhotoGallery = () => {
  const [images, setImages] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalImages, setTotalImages] = useState(100); // Assuming total images to be fetched
  const rowsPerPage = 10; // How many images you load per fetch
  const galleryRef = useRef(null); // Ref for the scrollable container
  const lastImageObserver = useRef(null);

  // Function to handle fetching images
  const fetchImages = useCallback(async () => {
    const result = await getPhotos(currentPage, rowsPerPage);
    const newImages = result.images;
    setImages((prev) => [...prev, ...newImages]);
  }, [currentPage, rowsPerPage]);

  // Save and restore scroll position when new images are added
  useEffect(() => {
    if (galleryRef.current) {
      const scrollContainer = galleryRef.current;
      const scrollTop = scrollContainer.scrollTop; // Save scroll position
      fetchImages().then(() => {
        scrollContainer.scrollTop = scrollTop; // Restore scroll position
      });
    }
  }, [currentPage, fetchImages]);

  // Intersection Observer to detect when the last image is visible
  const lastImageElementRef = useCallback(
    (node) => {
      if (lastImageObserver.current) lastImageObserver.current.disconnect();
      lastImageObserver.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          console.log('Last image is intersecting');
          if (currentPage < Math.ceil(totalImages / rowsPerPage)) {
            setCurrentPage((prevPage) => prevPage + 1);
          }
        }
      });
      if (node) lastImageObserver.current.observe(node);
    },
    [currentPage, rowsPerPage, totalImages]
  );

  return (
    <div
      ref={galleryRef}
      style={{ height: '500px', overflowY: 'auto' }} // Define a scrollable container
    >
      <PhotoAlbum
        layout="rows"
        photos={images}
        onClick={(photo, index) => console.log(photo, index)}
      />
      {/* Invisible div at the end to trigger infinite scroll */}
      <div ref={lastImageElementRef} style={{ minHeight: '1px' }}></div>
    </div>
  );
};

export default PhotoGallery;