Pagination re-renders

[rholdos]

Hi. I have a really simple react pagination component built with usePagination hoook, I have some CSS on the buttons (altough they are not in the code below), but they don't use CSS transitions, because of consistant component re-render.

Found out range is changing with every button click and therefore the whole component keeps re-rendering with every button click / active page change. Can that be fixed somehow or should I use it differently?

Appreciate any help. Thanks.

import React from 'react';
import { usePagination } from '@mantine/hooks';
import { v4 as uuid } from 'uuid';

export const Pagination = ({
  rowCount,
  pageSize,
  onChange,
}: {
  rowCount: number;
  pageSize: number;
  onChange: (pageIndex: number) => void;
}) => {
  const id = uuid();
  const pageCount = Math.ceil(rowCount / pageSize);

  const { range, active, previous, next, setPage } = usePagination({
    siblings: 1,
    boundaries: 2,
    total: pageCount,
    onChange: onChange,
  });

  console.log('render');

  return (
    <nav>
      <ul>
        <li key={`pagination-${id}-prev`}>
          <button onClick={previous}>{'<'}</button>
        </li>
        {range.map((page, index) => (
          <>
            {page === 'dots' ? (
              <li key={`pagination-${id}-dots-${index}`}>{'...'}</li>
            ) : (
              <li key={`pagination-${id}-page-${page}`}>
                <button onClick={() => setPage(page)}>{page}</button>
              </li>
            )}
          </>
        ))}
        <li key={`pagination-${id}-next`}>
          <button onClick={previous}>{'>'}</button>
        </li>
      </ul>
    </nav>
  );
};

[rtivital]

What is wrong with rerendering? Do you have performance issues?

[rholdos]

No, I want to use CSS transitions on buttons, disabled state, etc. Not possible with rerendering.

[rholdos]

Hm, nevermind, no idea how but my CSS transitions started working. Rerenders themselves are not a problem. Thanks for reply.