Skip to content

[feature]: Build a reusable React hook library for issue filtering and pagination #9655

Description

@shashankcoc

Is there an existing issue for this?

  • I have searched the existing issues

Summary

I would like to propose abstracting the issue filtering logic into a centralized, reusable custom React hook (e.g., useIssueFilters.ts).

Currently, filtering logic (by assignee, priority, label, date range, etc.) and pagination is scattered across multiple components like IssueListView, Kanban headers, and Inbox lists. This hook would encapsulate common filtering logic, handle server-side pagination with helpers (nextPage, fetchMore), and support memoizing API calls to prevent duplicate network requests. It would also optionally serialize active filter states into URL query parameters so users can easily bookmark and share specific filtered views.

Why should this be worked on?

Currently, developers have to duplicate complex filtering and pagination instructions every time a new filtered view is needed, which leads to inconsistent behavior across different parts of the application (e.g. apps/web vs apps/space). Centralizing this into a single reusable hook will:

Reduce Technical Debt:
Enforces the DRY (Don't Repeat Yourself) principle, making the codebase much easier to read and maintain.
Improve Performance:
By memoizing requests, we ensure identical filter combinations don't spam the API or re-render unnecessarily.
Developer Experience:
I plan to include comprehensive JSDoc TypeScript documentation and Jest unit tests covering filter combinations and edge cases, making it a robust foundational utility for the team.

If approved, I would love to contribute this feature and submit a PR for it!

Metadata

Metadata

Assignees

Labels

Fields

Edition

None yet

Version

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions