Soy nuevo en React, así que me preguntaba. Estoy creando este componente que contiene una matriz de más de 200 elementos, y no quiero renderizar esos elementos inmediatamente, por eso estoy usando la función Infinite Scroll, para que cuando el usuario se acerque al final de la lista, se rendericen nuevos elementos. Pero cuando eso sucede debido a cambios de estado, los elementos anteriores también se vuelven a renderizar, porque se crea una nueva matriz de objetos. ¿Hay alguna forma de optimizar esto para que solo se representen los elementos nuevos y el anterior permanezca igual?

Este es mi componente que usa desplazamiento infinito y muestra elementos:

 import styles from "./CountriesSection.module.css"; import { useEffect, useMemo, useRef, useState } from "react"; import { useInfinityScroll } from "../hooks/useInfinityScroll"; import CountriesList from "./CountriesList"; const data = new Array(240).fill({}); const CountriesSection = () => { const [currentItemsDisplayed, setCurrentItemsDisplayed] = useState(40); const componentsToShow = useMemo(() => { return data.slice(0, currentItemsDisplayed); }, [currentItemsDisplayed]); const divRef = useRef(null); let isVisible = useInfinityScroll(divRef); useEffect(() => { if (!isVisible) return; setCurrentItemsDisplayed((prevVal) => prevVal + 20); }, [isVisible]); return ( <> <div className={styles["section-countries"]}> <CountriesList countries={componentsToShow} /> </div> <div className={styles.infinity} ref={divRef} /> </> ); }; export default CountriesSection;

Tarjeta País:

 import CountryCard from "./CountryCard"; import React from "react"; const CountriesList = ({ countries }) => { const countryToCard = (country, id) => <CountryCard key={id} />; return countries.map(countryToCard); }; export default React.memo(CountriesList);

Codesandbox aquí: https://codesandbox.io/s/gifted-mclaren-qhn4po?file=/src/components/CountriesList.jsx:0-263