React Typescript with hooks : Maximum update depth exceeded error

Question

I have this error : Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I don't know why is an error, can anyone help?

App.tsx file :

const [showPerPage] =useState(1);
const [pagination, setPagination] = useState({ start: 0, end: showPerPage, });


const onPaginationChange = (start, end) => { 
setPagination({ start, end });
};

<Grid container lg={12} xs={12} sm={12}> {list.slice(pagination.start, pagination.end).map((post) => (
 <h5>{post.id}</h5> ))
} 

<UsePagination 
showPerPage={showPerPage}
onPaginationChange={onPaginationChange} 
total={list.length} /> 
</Grid>

ReactJS component code: UsePagination.tsx file

import React, { useState, useEffect } from 'react';

export const UsePagination = ({ showPerPage, onPaginationChange, total }) => {
  const [counter, setCounter] = useState(1);
  const [numberOfButtons] = useState(Math.ceil(total / showPerPage));

  useEffect(() => {
    const value = showPerPage * counter;
    onPaginationChange(value - showPerPage, value);
  }, [counter]);

  const onButtonClick = (type) => {
    if (type === 'prev') {
      if (counter === 1) {
        setCounter(1);
      } else {
        setCounter(counter - 1);
      }
    } else if (type === 'next') {
      if (numberOfButtons === counter) {
        setCounter(counter);
      } else {
        setCounter(counter + 1);
      }
    }
  };
  return (
    <div className="d-flex justify-content-center">
      <nav className="hd-pagination">
        <ul className={'hd-pagination__wrapper'}>
          <li className="hd-pagination__item hd-pagination__button">
            <button
              type="button"
              data-testid="pagination-prev-button"
              onClick={() => onButtonClick('prev')}
              className="hd-pagination__link"
            >
              pre
            </button>
          </li>
          {new Array(numberOfButtons).fill('').map((el, index) => (
            <li
              key={el}
              className={`hd-pagination__item ${index + 1 === counter ? 'active' : null}`}
            >
              <button
                type="button"
                data-testid="pagination-button-number"
                data-automation-id="instantCheckout-pagination-button"
                onClick={() => setCounter(index + 1)}
                className={`hd-pagination__link`}
              >
                {index + 1}
              </button>
            </li>
          ))}
          <li className={'hd-pagination__item hd-pagination__button'}>
            <button
              type="button"
              data-testid="pagination-next-button"
              onClick={() => onButtonClick('next')}
              className={'hd-pagination__link'}
            >
              Next
            </button>
          </li>
        </ul>
      </nav>
    </div>
  );
};

Answer 1

you will get that error whenever you have an infinite loop on your componentDidMound or useEffect (in your case App.tsx file)

for solving your problem it's better to remove onPaginationChange function in useEffect of UsePagination.tsx file and add that function to onClick event of your buttons.

try like this:

<button
  type="button"
  data-testid="pagination-button-number"
  data-automation-id="instantCheckout-pagination-button"
  onClick={() => {
              const value = showPerPage * (index + 1)
              setCounter(index + 1)
              onPaginationChange(value - showPerPage, value)
          }}
  className={`hd-pagination__link`}
>
  {index + 1}
</button>