Infinite Scroll with API

Сложная

Реализуйте бесконечный скролл с загрузкой данных из API. Требования: ✓ При скролле до конца списка загружаются следующие элементы ✓ Индикатор загрузки во время fetch ✓ Обработка ошибок загрузки с возможностью retry ✓ Предотвращение множественных запросов (debounce/throttle) ✓ Отображение сообщения "No more items" когда все данные загружены ✓ Smooth scroll experience без багов ✓ Оптимизация производительности API эндпоинт (mock): - Используйте встроенную функцию fetchUsers(page, limit) - Возвращает { data: User[], hasMore: boolean } - Имитирует задержку сети 500ms Критерии приемки: ✓ Загружается первая страница при монтировании ✓ При достижении конца списка автоматически загружается следующая ✓ Loading state показывается корректно ✓ Нет дублирующих запросов ✓ Обработаны edge cases (пустой список, ошибки, последняя страница) ✓ Производительность оптимизирована (useCallback, useMemo где нужно)

Infinite Scroll with API

Сложная

Close file
Close file
import { useState, useEffect, useCallback, useRef } from 'react';
import './styles.css';

// Mock API function - DO NOT MODIFY
const fetchUsers = (page, limit = 20) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const totalUsers = 100;
      const start = (page - 1) * limit;
      const end = Math.min(start + limit, totalUsers);
      
      // Simulate random error (5% chance)
      if (Math.random() < 0.05) {
        reject(new Error('Failed to fetch users'));
        return;
      }
      
      const users = [];
      for (let i = start; i < end; i++) {
        users.push({
          id: i + 1,
          name: `User ${i + 1}`,
          email: `user${i + 1}@example.com`,
          avatar: `https://i.pravatar.cc/150?img=${(i % 70) + 1}`
        });
      }
      
      resolve({
        data: users,
        hasMore: end < totalUsers,
        page,
        total: totalUsers
      });
    }, 500);
  });
};

export default function App() {
  // Your code here
  // TODO: Implement state management
  // TODO: Implement infinite scroll logic
  // TODO: Implement error handling
  // TODO: Optimize performance

  return (
    <div className="app">
      <h1>Infinite Scroll</h1>
      
      <div className="user-list">
        {/* Render users here */}
      </div>

      {/* Loading indicator */}
      
      {/* Error message with retry */}
      
      {/* No more items message */}
    </div>
  );
}

Preview

Console