Реализация бесконечной прокрутки с помощью хуков

Понимание бесконечной прокрутки

Бесконечная прокрутка — это механизм, позволяющий подгружать новый контент при прокрутке страницы вниз. Этот подход широко используется в социальных сетях, блогах и каталогах товаров, чтобы сделать пользовательский опыт более удобным и непрерывным. Вместо кнопок «Загрузить ещё» вы просто скроллите страницу, а контент появляется автоматически.

В React бесконечная прокрутка часто реализуется с использованием хуков, таких как useState и useEffect. Этот подход обеспечивает декларативный и удобный способ управления состоянием и вызовом обновлений.

Реализация бесконечной прокрутки

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

Шаг 1: Настройка базового компонента

Начнём с создания компонента, который будет управлять состоянием загружаемых данных. Например, у нас есть массив записей, который увеличивается по мере прокрутки.

Пример кода:

import React, { useState, useEffect } from 'react';



const InfiniteScroll = () => {

  const [items, setItems] = useState([]);

  const [page, setPage] = useState(1);

  const [isLoading, setIsLoading] = useState(false);



  useEffect(() => {

    const fetchData = async () => {

      setIsLoading(true);

      const newItems = await fetch(`https://api.example.com/items?page=${page}`);

      const data = await newItems.json();

      setItems((prevItems) => [...prevItems, ...data]);

      setIsLoading(false);

    };



    fetchData();

  }, [page]);



  return (

    <div>

      {items.map((item, index) => (

        <div key={index} className="item">

          {item.title}

        </div>

      ))}

      {isLoading && <p>Loading...</p>}

    </div>

  );

};



export default InfiniteScroll;

Этот базовый компонент загружает данные из API и добавляет их в список при изменении страницы. Однако пока он не реагирует на прокрутку.

Шаг 2: Отслеживание прокрутки

Чтобы автоматизировать загрузку данных при достижении конца страницы, нам нужно отслеживать прокрутку. Для этого мы добавим слушатель события scroll, который будет проверять, достиг ли пользователь нижней части страницы.

Пример кода:

useEffect(() => {

  const handleScroll = () => {

    if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 50) {

      setPage((prevPage) => prevPage + 1);

    }

  };



  window.addEventListener('scroll', handleScroll);

  return () => window.removeEventListener('scroll', handleScroll);

}, []);

Теперь, когда пользователь прокручивает страницу вниз, компонент загружает новые данные автоматически.

Оптимизация и улучшение UX

Когда вы работаете с бесконечной прокруткой, важно учитывать производительность и удобство пользователей. Вот несколько советов:

1. Дебаунсинг событий прокрутки. Для предотвращения избыточного вызова функций можно использовать lodash.debounce или аналогичный метод.

2. Индикатор загрузки. Добавьте визуальный индикатор, чтобы пользователь понимал, что новые данные загружаются.

3. Обработка пустых данных. Убедитесь, что вы корректно обрабатываете ситуации, когда данные больше не доступны.

Пример кода с дебаунсингом:

import debounce from 'lodash.debounce';



useEffect(() => {

  const handleScroll = debounce(() => {

    if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 50) {

      setPage((prevPage) => prevPage + 1);

    }

  }, 200);



  window.addEventListener('scroll', handleScroll);

  return () => window.removeEventListener('scroll', handleScroll);

}, []);

Дебаунсинг снижает нагрузку на браузер, ограничивая частоту вызовов функции handleScroll.