Fetching & Displaying Data

How should large datasets be handled when displaying them in the UI?

function VirtualizedList({ items }) {
  const [visibleItems, setVisibleItems] = useState([]);
  const containerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const { scrollTop, clientHeight } = containerRef.current;
      const startIndex = Math.floor(scrollTop / 50);
      const endIndex = Math.floor((scrollTop + clientHeight) / 50);
      setVisibleItems(items.slice(startIndex, endIndex + 1));
    };

    containerRef.current.addEventListener('scroll', handleScroll);
    return () => containerRef.current?.removeEventListener('scroll', handleScroll);
  }, [items]);

Always show all items at once
Limit the dataset size on the server
Implement pagination or virtualization
Large datasets require careful handling to maintain performance. Best practices include: 1) Implementing virtualization to only render visible items, 2) Using pagination to load data in chunks, 3) Implementing infinite scroll with appropriate throttling/debouncing, 4) Maintaining smooth scrolling and responsive UI. Additional considerations include: - Using intersection observers for infinite scroll - Implementing proper loading states - Caching already loaded data - Using appropriate key props for optimal rendering - Implementing search and filtering on the server side
Cache all items in localStorage

Next Question (9/20)