Skip to content

[hook]: Create useVirtualList hook #478

Description

@debabin

Add useVirtualList hook

We need to add a new hook called useVirtualList to @siberiacancode/reactuse.
The hook should virtualize the rendering of large lists. Instead of mounting every item, it renders only the items currently visible inside a scrollable container (plus a small overscan buffer), which solves slow first render and janky scrolling when displaying massive amounts of data. It should be useful for long feeds, tables, chat history, search results, and any case where thousands of rows need to be rendered.

What needs to be done

  1. Create a new hook directory inside the hooks package:
packages/hooks/src/useVirtualList
  1. Add the hook implementation:
useVirtualList.ts
  1. Add unit tests:
useVirtualList.test.ts
  1. Add a demo/example component for the documentation.
  2. Export the hook from the package entry point so it is available from:
import { useVirtualList } from '@siberiacancode/reactuse';
  1. Make sure the hook is SSR-compatible.
    Do not access window, document, or other browser-only APIs at module level.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions