Array update speed

🐛 Bug Report

I thought that since immer updates arrays directly, it would be more or less as performant as updating the array directly, but this is not at all the case.

I simulated the pattern "remove the nth element of an array". Code pasted later. The results on my machine are:

filter: 186.852ms
immer: 15.871s
splice: 50.453ms

immer seems to be 84 slower than the standard way to remove the nth element of an array in a mutable way (which is looping throught all the elements to remove the given index). This, itself, is not an efficient method, yet in my example is only ~4 times slower then directly using Array.splice()

Link to repro

import {produce} from "immer"

const arr = Array.from({length: 10_000_000}, (i, idx) => ({n: idx}));

console.time('filter');
let remove10_000nth = arr.filter(((i, idx) => idx !== 10_000));
console.timeEnd('filter');

console.time('immer');
remove10_000nth = produce(arr, draft => {
  draft.splice(10_000, 1)
})
console.timeEnd('immer');

console.time('splice');
arr.splice(10_000, 1);
console.timeEnd('splice');

Environment

• Immer version: 10.0.4
• I filed this report against the latest version of Immer
• Occurs with setUseProxies(true)
• Occurs with setUseProxies(false) (ES5 only)

Start with the provided JavaScript benchmark and reproduce the comparison between filter, Immer's produce with draft.splice, and direct Array.splice on a 10,000,000-element array. Trace the produce and array-update path responsible for the difference, then verify the reported performance gap with the same benchmark. Done means the array update is materially improved or the expected performance behavior is clearly established.