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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions