Как предотвратить перерендеринг при загрузке новых данных?

Question

[mrrangerr]

Всем привет, делаю фотоприложение где на главной странице с помощью библиотеки ReactInfiniteScroll загружаю бесконечный список фотографий. Каждый раз когда дохожу до конца страницы загружается новый список фотографий и происходит перерендер страницы. Как это предотвратить?

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

Comments

[camelCaseVlad]

Всей страницы или только данного компонента?

[mrrangerr]

camelCaseVlad, данного компонента

Answer 1

[Даша Циклаури]

ты каждый раз создаёшь новые Идентификаторы для атрибута key, а надо использовать сквозные через все запросы

Comments

[mrrangerr]

Искреннее спасибо! У меня получилось!)