Tengo una lista de datos como esta:

 data = [ { id:1, name: "boo" }, { id:1, name: "boo" } ]

Lo inicializo con reaccionar UseState de la siguiente manera:

 const [items, setItems] = useState(data)

Y mapeo esto en mi código de reacción y los visualizo.

Si quiero borrar uno lo hago con la siguiente función:

 const deleteItem = async (id) => { console.log('BEFORE- - - ->', items); // this functions calls an api to delete the item await deleteItem({ id }); setItems((oldItems) => oldItems.filter(({ id }) => id !== commentId) ); console.log('AFTER- - - ->', items); };

Gráficamente, el componente con el elemento eliminado desaparece, pero en realidad el segundo console.log imprime lo mismo que el primer registro. En este caso si elimino el elemento con id:1 obtendré el mismo log mientras veo gráficamente que el elemento desaparece. Esto causa un problema con la indexación si quiero eliminar más de un elemento.

¿Cuál crees que es el problema? ¿Tengo que hacerlo en un useEffect?