use-pagination.ts

Overview

The use-pagination.ts file provides a custom React hook named useClientPagination that facilitates client-side pagination of data arrays. It enables React components to easily manage the current page, page size, and paginated subset of a larger list without requiring server-side pagination logic.

This hook is particularly useful in user interfaces where a large dataset is retrieved once and needs to be displayed in smaller chunks or pages, improving readability and performance by limiting the number of items rendered at a time.

Detailed Description

useClientPagination(list: Array<any>)

A React hook that manages pagination state and logic for a given array of data.

Parameters

• list: Array<any>
  The full dataset array to paginate. This can be an array of any items (objects, primitives, etc.).

Returns

An object containing the following properties and functions:

Usage Example

import React from 'react';
import { useClientPagination } from './use-pagination';

const MyPaginatedComponent = ({ data }) => {
  const {
    page,
    pageSize,
    setPage,
    setPageSize,
    onPaginationChange,
    pagedList,
  } = useClientPagination(data);

  return (
    <div>
      <ul>
        {pagedList.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <PaginationControls
        currentPage={page}
        pageSize={pageSize}
        totalItems={data.length}
        onChange={onPaginationChange}
      />
    </div>
  );
};

Implementation Details

• Uses React useState hooks to hold page and pageSize state.

• The onPaginationChange function uses useCallback to memoize the update function, preventing unnecessary re-renders.

• The pagedList is computed using useMemo to efficiently slice the original list only when list, page, or pageSize change.

• Pagination is zero-based internally but exposed as 1-based indexing for usability.

• The slice operation:

  list.slice((page - 1) * pageSize, page * pageSize)
  

  extracts the subset of the array matching the current page.

Interaction with Other System Parts

• This hook is intended to be imported and used in React functional components that require client-side pagination.

• It expects the full dataset to be provided as input (list), so it is commonly used after fetching or receiving data.

• The returned pagedList can be passed directly to UI elements like tables, lists, or grids.

• The pagination control UI components can use page, pageSize, and onPaginationChange to synchronize user input with the pagination state.

• Does not handle data fetching or server-side pagination — strictly client-side.

Visual Diagram

flowchart TD
    A[useClientPagination(list)] --> B[useState: page (default 1)]
    A --> C[useState: pageSize (default 10)]
    A --> D[useCallback: onPaginationChange(page, pageSize)]
    A --> E[useMemo: pagedList = list.slice((page-1)*pageSize, page*pageSize)]
    B --> F[setPage]
    C --> G[setPageSize]
    A --> H[returns { page, pageSize, setPage, setPageSize, onPaginationChange, pagedList }]

Summary

use-pagination.ts provides a simple yet effective custom React hook for managing client-side pagination of any array of data. It abstracts state management and slicing logic, allowing seamless integration into React components that require paginated views. The use of React hooks (useState, useCallback, useMemo) ensures performance optimization and clean handling of pagination updates.

This utility is focused purely on the logic layer and relies on external UI components to render controls and display paginated data. It supports flexible page sizes and page navigation for dynamic user interaction.