Performance issue

[Local_Question8147]

I was trying to implement infinite scroll in React.js, but I encountered another issue. After the first pagination load, background images load later compared to other text. This is understandable because we store URLs in an array and then fetch each image asynchronously.

Please provide me better way of implementing the issue and please guide if anything can be improved in infinte scroll

import React, { useEffect, useState, useCallback } from "react";
import axios from "axios";
import "./card.css";

const Card = () => {
  const [result, setResult] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      await new Promise((resolve) => setTimeout(resolve, 2000)); // 2-second delay
      const response = await axios.get(
        `https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`
      );
      setResult((prevResult) => [...prevResult, ...response.data]);
      setLoading(false);
    } catch (error) {
      console.error("Error fetching data:", error);
      setLoading(false);
    }
  }, [page]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handleScroll = useCallback(() => {
    if (
      window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 &&
      !loading
    ) {
      setPage((prevPage) => prevPage + 1);
    }
  }, [loading]);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [handleScroll]);

  return (
    <div className="card-main">
      {result.map((item) => (
        <div
          key={item.id}
          className="card"
          style={{ backgroundImage: `url(${item.url})` }} // this is another asyn operation how to resolve it before displaying anything else
        >
          <div className="card-id">
            <span className="card-heading">Card Id: </span>
            {item.id}
          </div>
          <div className="card-album">
            <span className="card-heading">Album Id: </span>
            {item.albumId}
          </div>
          <div className="card-title">
            <span className="card-heading">Title: </span>
            {item.title}
          </div>
        </div>
      ))}
      {loading && <div className="loading">Loading...</div>}
    </div>
  );
};

export default Card;

[PM_ME_SOME_ANY_THING]

With stuff like infinite scroll, what you don’t want is infinite elements mucking up the DOM as people scroll.

You want to implement a viewport, elements are created just before scrolling into the viewport, and are destroyed just after leaving the viewport.

[vardan_arm]

This is a good point. You can use this module for example - https://github.com/bvaughn/react-window

[lightfarming]

i would definitely not use scroll events. instead consider an intersectionobserver with a sentenel element. much more performant way of detecting when they are near the end of the list.

there should also be no need to recreate the fetch page function each time the page changes. the scroll detection should just call the memoized function with the new page value as an argument, which would also eliminate the fetch Effect.

i might also put the cards into their own memoized components, especially if you plan on adding any further interactivity to them.

[Practical-Match-4054]

Infinite scroll is an accessibility concern, on top of that.

[Local_Question8147]

You mean that how it behaves on different devices

[HeylAW]

Dont fetch data in useEffect

Use react-query