> ## Documentation Index
> Fetch the complete documentation index at: https://use-any-hook-d92674ab.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useInfiniteScroll

> Easily implement infinite scrolling to load more data as the user scrolls with useInfiniteScroll.

#### **Install**

```bash npm theme={null}
npm i use-any-hook
```

#### **Description**

The `useInfiniteScroll` hook simplifies the implementation of infinite scrolling in your React application. It allows you to load more data automatically as the user scrolls to the bottom of the page or a container. This hook is particularly useful for applications that need to fetch and display a large dataset in chunks, improving both performance and user experience.

#### **Parameters**

| Name     | Type       | Description                                                                                                     |
| -------- | ---------- | --------------------------------------------------------------------------------------------------------------- |
| loadMore | () => void | A function to be called when more data needs to be loaded. This function should handle the data fetching logic. |

#### **Return Values**

| Name       | Type    | Description                                                                                                         |
| ---------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| isFetching | boolean | A boolean indicating whether the hook is currently fetching more data. This can be used to show loading indicators. |

#### **Example**

```javascript useInfiniteScroll.example.tsx theme={null}
import { useInfiniteScroll } from "use-any-hook";

function InfiniteScrollExample() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);

  // Simulated function to fetch more data
  const fetchMoreData = async () => {
    // Simulated API call to fetch more items (e.g., from a backend server)
    const response = await fetch(`https://api.example.com/items?page=${page}`);
    const newData = await response.json();

    // Update the items and page
    setItems([...items, ...newData]);
    setPage(page + 1);
  };

  const isFetching = useInfiniteScroll(fetchMoreData);

  useEffect(() => {
    // Initial data fetch when the component mounts
    fetchMoreData();
  }, []);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      {isFetching && <p>Loading more items...</p>}
    </div>
  );
}
```