Infinite Scroll with API

Hard

Implement infinite scroll with API data loading. Requirements: ✓ Load next items when scrolling to bottom ✓ Loading indicator during fetch ✓ Error handling with retry option ✓ Prevent multiple requests (debounce/throttle) ✓ Display "No more items" when all data is loaded ✓ Smooth scroll experience without bugs ✓ Performance optimization API endpoint (mock): - Use built-in fetchUsers(page, limit) function - Returns { data: User[], hasMore: boolean } - Simulates 500ms network delay Acceptance Criteria: ✓ First page loads on mount ✓ Next page loads automatically when reaching bottom ✓ Loading state displays correctly ✓ No duplicate requests ✓ Edge cases handled (empty list, errors, last page) ✓ Performance optimized (useCallback, useMemo where needed)

Infinite Scroll with API

Hard

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