Как динамически подгружать компоненты по скроллу в React.js?

React.js — это библиотека JavaScript, которая используется для создания пользовательских интерфейсов. Одним из способов улучшения производительности React-приложения является динамическая подгрузка компонентов по скроллу. В этой статье мы рассмотрим, как это сделать.

Для начала нам нужно создать компонент, который будет отображаться при скролле. Для этого мы можем использовать React.lazy() и Suspense. React.lazy() позволяет нам лениво загружать компоненты, а Suspense — отображать заглушку во время загрузки.

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

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

import React, { useState, useEffect } from 'react';
import LazyComponent from './LazyComponent';

function App() {
  const [showComponent, setShowComponent] = useState(false);

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

  const handleScroll = () => {
    if (window.scrollY > 1000) {
      setShowComponent(true);
    }
  };

  return (
    <div>
      {showComponent && <LazyComponent />}
    </div>
  );
}

export default App;

В этом примере мы использовали хук useEffect() для добавления обработчика события скролла. Когда пользователь доскроллит до 1000 пикселей, компонент начнет загружаться.

Надеюсь, эта статья поможет вам динамически подгружать компоненты по скроллу в React.js!