Primero, permítanme abordar esto de manera preventiva diciendo que sé que no debemos mutar el estado. Solo quería explorar qué saldría mal exactamente si mutamos el estado directamente.

Aquí construí una aplicación de tareas simple. Los elementos de tareas pendientes se almacenan en una matriz. por ejemplo [{id: 0, name: 'foo'}, {id: 1, name: 'bar'}]

Para eliminar un elemento pendiente de la lista, creo que lo que debemos hacer, es decir, la forma inmutable es filtrar ese elemento pendiente de la lista y devolver una copia de una nueva lista. es decir

 setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));

Pero estaba pensando que esto puede ser lento porque es un proceso O(n). Si supiéramos el índice de cada elemento de tareas pendientes en la lista y pudiéramos hacer una búsqueda de tiempo constante para encontrar ese elemento de la lista y establecerlo en null o algo así.

Una forma de lograr esto es tener una variable de count que comience desde 0 y la usamos como la id para cada elemento de tarea pendiente e incrementamos la cuenta cada vez que agregamos una nueva tarea pendiente. En este caso, el id sería igual al índice numérico correspondiente a la posición que tiene el elemento pendiente en la lista. y simplemente tomamos esa identificación y actualizamos la lista directamente.

 todos[id] = null;

Sin embargo, esto deja el componente en un estado extraño, cada vez que elimino un elemento, la lista en realidad se agregará como una tarea pendiente.

Por ejemplo, antes de tener [{id: 0, name:'foo'}] después de hacer todos[0] =null , terminaremos con [null, {id: 1, name:''}]

Aquí hay una demostración en vivo con la que puedes jugar https://codesandbox.io/s/react-todo-mutate-e0zj3?file=/src/App.js

¿Alguien puede señalar cómo sucedió exactamente este error?

Una vez más, sé que mutar el estado no es el camino correcto, pero solo quería entender React más profundamente, así que hice este pequeño experimento.