How to prevent re-rendering when new data is loaded?

Question

JavaScript

Hello everyone, I'm making a photo application where on the main page I load an endless list of photos using the ReactInfiniteScroll library. Every time I reach the end of the page, a new list of photos is loaded and the page is re-rendered. How to prevent it?

function Test() {
    const [photos, setPhotos] = useState([])
    const [perPage, setPerpage] = useState(1)

    const getData = useCallback(() => {
        unsplash.photos
            .listPhotos(perPage, 15, "latest")
            .then(toJson)
            .then(json => {
                setPhotos([...photos, ...json])
                setPerpage(perPage + 1)
            })
    }, [photos, perPage])

    useEffect(() => {
        getData()
    }, [])

   
    const styles = {
        padding: "15px"
    }

    const childElements = photos.map(photo => (
        <li className="list-unstyled" key={uuidv4()}>
            <Link to={`/${photo.id}`} key={uuidv4()} >
                <img className="rounded" style={styles} src={photo.urls.small} alt={photo.description}></img>
            </Link>
        </li>
    ))

    return (
        <div>
            <InfiniteScroll dataLength={photos.length}
                next={getData}
                hasMore={true}
                loader={<img src="loader.png" alt="loader"></img>}
            >
                <Masonry elementType={"ul"}>
                    {childElements}
                </Masonry>
            </InfiniteScroll>
        </div>
    )
}

export default Test

Answer 1

you create new Identifiers for the key attribute every time, but you need to use end-to-end through all requests