A comprehensive React hook that manages cursor-based pagination state including URL synchronization, debounced search, and pagination tracking, eliminating 60-80 lines of boilerplate code from paginated components. ## Key Components - **`useCursorPaginationState`** - Main hook that orchestrates pagination state management - **`PaginationParams`** - Type for URL-managed pagination parameters (search, cursor) - **`CursorPaginationStateReturn`** - Complete return interface with search, pagination handlers, and URL params - **`UseCursorPaginationStateOptions`** - Configuration interface for initial load and search change callbacks ## Usage Example ```typescript import { useCursorPaginationState } from './use-cursor-pagination-state' function DialogList() { const { searchInput, setSearchInput, hasLoadedBeyondFirst, handleNextPage, handleResetToFirstPage } = useCursorPaginationState({ debounceMs: 300, onInitialLoad: async (search, cursor) => { await fetchDialogs(false, search, true, cursor) }, onSearchChange: async (search) => { await fetchDialogs(false, search) } }) return (
setSearchInput(e.target.value)} placeholder="Search dialogs..." />
) } ``` The hook automatically handles URL state synchronization, prevents effect loops during initialization, and provides clean separation between initial loads and search changes.