Infinite recursion while iterating through useState array-CodePudding

I have a react native todo list app. The task items are represented by an array using useState which is declared as follows:

const [taskItems, setTaskItems] = useState([]);

I'm trying to add a function that deletes all of the items but instead of just setting it like this setTaskItems([]), which simply deletes all items at once, I was hoping to delete the items one at a time starting from the end to create a more animated look.

while(taskItems.length > 0)
     { 
        alert(taskItems.length);
        let itemsCopy = [...taskItems];
        itemsCopy.splice(-1);
        setTaskItems(itemsCopy);
        //setTimeout(function(){},180);
      }

For some reason the above code causes infinite recursion. If I remove the while loop then the deleteAll function does indeed remove the last item in the list. Based on my placing the alert at the beginning of the function it seems like the length of the array is never decreased.

Why is that?

CodePudding user response：

It happen because in your code taskItem value doesn't change when you use setTaskItems

setTaskItems is an asynchronous function and the updated value of the state property change after the rerender of the component

you can try something like this

const [taskItems, setTaskItems] = useState([]);
const [deleteAll, setDeleteAll] = useState(false)


useEffect(() => {
  if(!deleteAll) return;
  if(taskItems.lenght === 0){
   setDeleteAll(false)
   return;
  }
  setTaskItems(t => t.slice(0, -1))
  
}, [deleteAll, taskItems])



const handleDeleteAll = () => {
 seDeleteAll(true)
}

CodePudding user response：

That is because taskItems value is retrieved from closure, meaning you can not expect value to be changed during handler execution. Closure recreates only after element rerenders, meaning you can access new state value only in next function execution - during the function execution value of the state never change.

You just need to assign length value to some temp variable, and use it as start/stop indicator for while loop:

let itemsCount = taskItems.length;
while(itemsCount > 0)
 { 
    // Here use itemsCount to determine how much you would need to slice taskItems array
    itemsCount -= 1;
  }