Приведи пример реализации сложной фитчи

Одна из сложных фитч — бесконечная лента с виртуализацией и подгрузкой данных. Реализация требует:

1. Виртуализации списка (рендерим только видимые элементы)
2. Подгрузки данных при скролле
3. Оптимизации перерисовок

Пример на React с использованием react-window:

import { FixedSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

const InfiniteList = ({ items, loadMore, hasMore }) => {
  const onScroll = ({ scrollOffset }) => {
    if (scrollOffset > items.length * 30 - 500 && hasMore) {
      loadMore();
    }
  };

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          width={width}
          itemCount={items.length}
          itemSize={50}
          onScroll={onScroll}
        >
          {({ index, style }) => (
            <div style={style}>
              Item {items[index].id}
            </div>
          )}
        </List>
      )}
    </AutoSizer>
  );
};

Ключевые моменты:

• react-window рендерит только видимые элементы
• AutoSizer подстраивает размеры под контейнер
• Подгрузка срабатывает при приближении к концу списка
• Минимальные перерисовки благодаря виртуализации