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>
  );
};

key={el} looks wrong if el is always the empty string, maybe use some unique id + the index as key? — Clashsoft
– Clashsoft, Commented Jun 15, 2021 at 19:19
What happens when you call onPaginationChange? Can we see the parent component? — Connor Low
– Connor Low, Commented Jun 15, 2021 at 19:27
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> — samir
– samir, Commented Jun 15, 2021 at 19:50
Please edit your question and format your code rather than comment, @samir. — Connor Low
– Connor Low, Commented Jun 15, 2021 at 19:58
i updated code ,i noticed that problem with useEffect only .is it possible without useEffect .Actually i am new in react .Thank you so much for helping — samir
– samir, Commented Jun 16, 2021 at 2:20

reza makhdomi · Accepted Answer · 2021-06-16 20:46:27Z

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>

edited Jun 16, 2021 at 20:46

answered Jun 15, 2021 at 19:35

reza makhdomi

6095 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

samir Over a year ago

thank you so much for helped ,Its working now but prev button and right button is not working

reza makhdomi Over a year ago

you should call onPaginationChange but you need to get current state of page and you understood this logic very well and created current state of your page so you just need to change only value variable like this : const value = showPerPage * counter

Collectives™ on Stack Overflow

React Typescript with hooks : Maximum update depth exceeded error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related