A hook to sync URL pagination

pagination.hook.jsx

import React from "react";

function parsePagination() {
  const searchParams = new URLSearchParams(window.location.search);

  return {
    page: parseInt(searchParams.get("page") || 1),
    pageSize: parseInt(searchParams.get("pageSize") || 10),
  };
}

export const usePagination = () => {
  const { page: _page, pageSize: _pageSize } = parsePagination();

  const [page, setPage] = React.useState(_page);
  const [pageSize, setPageSize] = React.useState(_pageSize);

  React.useMemo(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const newURL = new URL(window.location.href);
    searchParams.set("page", page);
    searchParams.set("pageSize", pageSize);
    searchParams.sort();
    newURL.search = searchParams.toString();
    window.history.pushState({ path: newURL.href }, "", newURL.href);
    console.log({
      page, pageSize
    })
  }, [page, pageSize]);

  return {
    page,
    pageSize,
    setPage,
    setPageSize,
  };
};