useEffect enters infinite loop when using React in Hooks - reactjs

Question

I'm paging with react. When doing this, I transfer the state in a parent component here. I transfer the information I transfer to a different state with a new array, but when I do it with useEffect, it enters an infinite loop. I couldn't set a dene state.
const Pagination = ({ posts }) => {
const gecici = posts
const sabit = 5;
const [dene, setDene] = useState([])
const [degisken, setDegisken] = useState(0)
useEffect(() => {
degistir()
console.log(dene)
}, [dene])
const degistir =() => {
var i = 1,
j;
if (sabit <= gecici.length) {
for (j = 0; j < (gecici.length / sabit); j++) {
setDene([
{
id: i, include:
gecici.slice(degisken, degisken + sabit)
}
]);
i += 1;
setDegisken(degisken+sabit)
}
}
}
Since I'm paging, I'm adding content up to a 'sabit' value on each page. The value i indicates the page number here.
The value of j is to fill the array up to the total number of pages.

Answer 1

The way the useEffect dependency array works is by checking for strict (===) equivalency between all of the items in the array from the previous render and the new render. Therefore, putting an array into your useEffect dependency array is extremely hairy because array comparison with === checks equivalency by reference not by contents.
const foo = [1, 2, 3];
const bar = foo;
foo === bar; // true
const foo = [1, 2, 3];
const bar = [1, 2, 3];
foo === bar; // false
So, since you have this:
useEffect(() => {
degistir()
console.log(dene)
}, [dene])
Your component enters an infinite loop. degistir() updates the value of dene to a new array. But even if the contents are the same, the reference of dene has changed, and the useEffect callback fires again, ad infinitum.
The solution depends a bit on what exact behavior you want to have happen. If you want the useEffect callback to trigger every time the size of the array changes, then simply use the length of the array in the dependency array, instead of the array itself:
useEffect(() => {
degistir()
console.log(dene)
}, [dene.length])
A less ideal solution is to convert your array into a string and compare the old stringified array to the new stringified array:
useEffect(() => {
degistir()
console.log(dene)
}, [JSON.stringify(dene)])
This is extremely inefficient but might work if the number of items in the array is small.
The best option is probably to get rid of the useEffect entirely. It is unlikely that you actually need it. Instead, you can probably accomplish your pagination as a pure result of: 1) The total number of posts, and 2) the current page. Then just render the correct posts for the current page, and have a mechanism for updating the current page value.
Perhaps something like this? The naming of your variables is confusing to me since I speak English only:
const Pagination = ({ posts }) => {
const gecici = posts
const sabit = 5;
const [degisken, setDegisken] = useState(0)
let dene = [];
var i = 1,
j;
if (sabit <= gecici.length) {
for (j = 0; j < (gecici.length / sabit); j++) {
dene = [
{
id: i, include:
gecici.slice(degisken, degisken + sabit)
}
];
i += 1;
}
}