Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0
Firefox 110
Windows
Desktop
one year ago
Test name Executions per second
immer.produce() 237166.3 Ops/sec
_.cloneDeep 14.7 Ops/sec
HTML Preparation code:
AخA
 
1
<script src="https://cdn.jsdelivr.net/npm/immer@3.1.3/dist/immer.umd.min.js"></script>
2
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
3
<script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js"></script>
Script Preparation code:
x
 
const numSiblings = 500;
const depth = 5;
state = {
    data: {
        data1: {
            data2: 'test',
            siblings: Array.from({
                length: numSiblings
            }).map(() => ({
                id: uuidv4()
            })),
            children: Array.from({
                length: depth
            }).map(() => ({
                id: uuidv4(),
                data: {
                    data1: {
                        data2: 'test',
                        siblings: Array.from({
                            length: numSiblings
                        }).map(() => ({
                            id: uuidv4()
                        })),
                        children: Array.from({
                            length: depth
                        }).map(() => ({
                            id: uuidv4(),
                            data: {
                                data1: {
                                    data2: 'test',
                                    siblings: Array.from({
                                        length: numSiblings
                                    }).map(() => ({
                                        id: uuidv4()
                                    })),
                                    children: Array.from({
                                        length: depth
                                    }).map(() => ({
                                        id: uuidv4(),
                                        data: {
                                            data1: {
                                                data2: 'test',
                                                siblings: Array.from({
                                                    length: numSiblings
                                                }).map(() => ({
                                                    id: uuidv4()
                                                })),
                                            },
                                        },
                                    })),
                                },
                            },
                        })),
                    },
                },
            })),
        },
        data3: Array.from({
            length: 1000
        }).map(() => document.createElement('div')),
    },
};
Tests:
  • immer.produce()

     
    const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' })
  • _.cloneDeep

     
    const result = _.cloneDeep(state);
    result.data.data1.data2 = 'updated';