React Window Infinite Loader

Common errors

• TypeError: Cannot read properties of undefined (reading 'then')

  cause `loadMoreRows` did not return a Promise.
  fix Make sure your `loadMoreRows` function returns a Promise that resolves when data fetching is complete. If using `async/await`, ensure the `async` keyword is present. If using a standard Promise, ensure it is explicitly returned.

• React Hook 'useInfiniteLoader' is called in a function that is neither a React function component nor a custom React Hook function.

  cause `useInfiniteLoader` is called outside of a functional React component or another custom hook.
  fix Ensure `useInfiniteLoader` is only called at the top level of a functional React component or within another custom hook that itself adheres to React Hook rules.

Warnings

• breaking The `InfiniteLoader` component underwent significant changes in version 2. The `onItemsRendered` parameter in its child function was renamed to `onRowsRendered`, and the `listRef` parameter was entirely removed. Existing code using the `InfiniteLoader` component from v1 will break if not updated to reflect these parameter changes.
  Fix: Update the render prop signature for `InfiniteLoader` from `{ onItemsRendered, listRef }` to `{ onRowsRendered }`. Pass the `onRowsRendered` prop to your `react-window` list component.
• gotcha It's crucial that the `loadMoreRows` prop passed to `useInfiniteLoader` or `InfiniteLoader` returns a Promise. If it does not return a Promise that resolves when data is loaded, the component will not correctly track the loading state, potentially leading to repeated fetches or a broken infinite scroll experience.
  Fix: Ensure your `loadMoreRows` function is `async` or explicitly returns a Promise. For example: `async (startIndex, stopIndex) => { await fetchData(startIndex, stopIndex); }` or `(startIndex, stopIndex) => { return new Promise(resolve => fetchData(startIndex, stopIndex).then(resolve)); }`.
• gotcha Incorrectly managing the `isRowLoaded` state can lead to either rows perpetually showing as loading or `loadMoreRows` being called too frequently or not at all. The `isRowLoaded` function must accurately reflect whether the data for a given `index` is available.
  Fix: Ensure your `isRowLoaded` function correctly checks the loaded state for the given `index` against your data source. This often involves checking if `index < yourDataSource.length` or if a specific item in your data array at `index` is defined.

Install

• npm install react-window-infinite-loader npm
• yarn add react-window-infinite-loader yarn
• pnpm add react-window-infinite-loader pnpm

Imports

• useInfiniteLoader
  wrong:

  import useInfiniteLoader from 'react-window-infinite-loader'

  correct:

  import { useInfiniteLoader } from 'react-window-infinite-loader'

  This is the recommended hook for functional components. It's a named export, not a default.
• InfiniteLoader
  wrong:

  const InfiniteLoader = require('react-window-infinite-loader')

  correct:

  import { InfiniteLoader } from 'react-window-infinite-loader'

  The `InfiniteLoader` component is a named export. ESM `import` is the primary usage pattern.
• InfiniteLoaderProps

  import type { InfiniteLoaderProps } from 'react-window-infinite-loader'

  Import types explicitly when using TypeScript for better type checking.

Quickstart

This example demonstrates how to use the `useInfiniteLoader` hook with `react-window`'s `FixedSizeList` to implement a basic infinite scrolling list. It simulates fetching data asynchronously and updates the list as new rows are loaded.

import { useInfiniteLoader } from 'react-window-infinite-loader';
import { FixedSizeList } from 'react-window';
import React, { useState, useCallback } from 'react';

const Row = ({ index, style, isLoaded }) => (
  <div style={style}>
    {isLoaded ? `Row ${index}` : `Loading row ${index}...`}
  </div>
);

const ExampleList = ({ itemCount, isRowLoaded, loadMoreRows }) => {
  const [items, setItems] = useState(Array(itemCount).fill(false));

  const infiniteLoaderProps = {
    isRowLoaded,
    loadMoreRows,
    itemCount,
    threshold: 5,
    minimumBatchSize: 10
  };

  const onRowsRendered = useInfiniteLoader(infiniteLoaderProps);

  return (
    <FixedSizeList
      height={300}
      itemCount={itemCount}
      itemSize={50}
      width={500}
      onRowsRendered={onRowsRendered}
    >
      {({ index, style }) => (
        <Row index={index} style={style} isLoaded={isRowLoaded({ index })} />
      )}
    </FixedSizeList>
  );
};

function App() {
  const ROW_COUNT = 1000;
  const isItemLoaded = ({ index }) => index < loadedItems.length;
  const [loadedItems, setLoadedItems] = useState(Array(50).fill(true));

  const loadMore = useCallback(async (startIndex, stopIndex) => {
    console.log(`Loading rows from ${startIndex} to ${stopIndex}`);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));

    setLoadedItems(prev => {
      const newItems = [...prev];
      for (let i = startIndex; i <= stopIndex; i++) {
        if (!newItems[i]) {
          newItems[i] = true;
        }
      }
      return newItems;
    });
  }, []);

  return (
    <ExampleList
      itemCount={ROW_COUNT}
      isRowLoaded={isItemLoaded}
      loadMoreRows={loadMore}
    />
  );
}

export default App;