Why am I getting an infinite loop and how to avoid it?

Good day , I want to write a simple pager on reacte but when I run the function paginatorPage for loading the first page with a parameter eForInit emboss error due to infinite loop. How to solve the problem ?

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

export default function Paginator({obj}) {
 let [itemsPerButton] = useState(10)
 let [startIndex , setStartIndex] = useState(0)
 let [finishIndex, setFinishIndex] = useState(10)
 let [arrItems , setArrItems] = useState([])
 let arrButtons = []
 let arrList = []


 const paginatorPage=(e)=> {
console.log(e)
e.target.className="active"
 let basicNum = e.target.value;
setFinishIndex(finishIndex=basicNum*10)
 arrList =[]
 for ( setStartIndex(startIndex=basicNum*10-10) ;startIndex < finishIndex && startIndex <= obj.length-1 ; startIndex++) {
 arrList.push(<div key={obj[startIndex].title}>{obj[startIndex].title}</p>)
}
setArrItems(arrItems=[arrList...])
}
 let eForInit = {
target:{
value:1,
className:"
}
}
paginatorPage(eForInit)



 let buttons = Math.ceil(obj.length/itemsPerButton);

 for (let index = 1; index <= buttons; index++) {
arrButtons.push(
 <button value={index} key={index} onClick={(e)=>{paginatorPage(e)}}>{index}</button>
)}


 return (
<>
the <div>
 i am Paginator , data length is {obj.length}
</div>
{arrItems}
the <div>
{arrButtons}
</div>
</>
)
}
April 3rd 20 at 17:35
1 answer
April 3rd 20 at 17:37
Solution
You paginatorPage is called inside of the render, and it changes state, which causes PreRender, and the render is called paginatorPage, and so on forever.

Addition:

1) paginatorPage must be either a function or a function handler, but not at the same time as you, I have hostility with the creation of a fake event.
2) you Have in the description of the cycle for some reason setState.
3) do Not use as key the index of the array.
4) This line is unnecessary
onClick={(e)=>{paginatorPage(e)}}
You can just write
onClick={paginatorPage}
and paginatorPage wrap in useCallback.
5) What's going on here, I do not understand
setArrItems(arrItems=[arrList...])
but understand exactly what's going on is not what you expect.
6) Where's the setter for?
let [itemsPerButton] = useState(10)
7) the semicolon, you are missing, put them always.
8) you can't write
setFinishIndex(finishIndex=basicNum*10)
First, finishIndex this state, it is necessary to change only through the appropriate function of set*, and secondly, do not need to make an assignment inside any other transactions as the code becomes unclear and confusing.
2) you Have in the description of the cycle for some reason setState.

5) What's going on here, I do not understand
setArrItems(arrItems=[arrList...])

are you talking about this piece setArrItems(arrItems=[arrList...]) ?It just copies the array arrList which was filled after the for loop in arrItems which is displayed on the screen.
6) Where's the setter for?
let [itemsPerButton] = useState(10)

For me is not needed , because I want 10 items per page everywhere
8) you can't write
setFinishIndex(finishIndex=basicNum*10)
First, finishIndex this state, it is necessary to change only through the appropriate function of set*, and secondly, do not need to make an assignment inside any other transactions as the code becomes unclear and confusing.

well setFinishIndex is seter for him : let [finishIndex, setFinishIndex] = useState(10),
the first variable , the second function to change the variable
For more tips thank you , but how to do pagination ? Can throw off how to do ? - Missouri_Kris commented on April 3rd 20 at 17:40

Find more questions by tags JavaScriptReact