Delete All Array Elements With Animation-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?

And is there a better way to achieve this effect?

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;
  }
  setTimeout(() => {
     setTaskItems(t => t.slice(0, -1))
  }, 180)
  
}, [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;
  }

UPDATED

An idea of how you should do it is:

  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const deleteAll = () => {
    let counter = items.length;

    while (counter > 0) {
      setTimeout(() => {
        setItems((p) => [...p.slice(0, counter - 1)]);
      }, counter * 1000);

      counter -= 1;
    }
  };

It is important to multiply timeout delay with length, in order to avoid simultaneous execution of all timeouts - you need one by one to be deleted. Also you should clear timeout on unmount or something like that.

CodePudding user response：

Due to asynchronous nature of React useState hook, you need to harness useEffect to do the job. Here's working example of removing all tasks with a 1000 ms delay between items.

function TasksGrid() {

    const [taskItems, setTaskItems] = useState([1, 2, 3, 4, 5, 6]);
    const [runDeleteAll, setRunDeleteAll] = useState(false);

    useEffect(
        () => {
            if (runDeleteAll) {
                if (taskItems.length > 0)
                    setTimeout(() => setTaskItems(taskItems.slice(0, taskItems.length - 1)), 1000);
                else
                    setRunDeleteAll(false);
            }
        },
        [runDeleteAll, taskItems]
    )

    const handleOnClick = () => {
        setRunDeleteAll(true);
    }

    return (
        <div>
            {taskItems.map((taskItem, idx) => <p key={idx}>task {taskItem}</p>)}
            <button onClick={handleOnClick}>delete all</button>
        </div>
    );
}