Run results for: Immer produce() vs Lodash cloneDeep() vs AngularJS copy() vs JSON.parse()

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser: Chrome 118

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 9 months ago

Test name	Executions per second
_.cloneDeep()	38.0 Ops/sec
AngularJS copy	2.8 Ops/sec
JSON.parse	87.7 Ops/sec
immer.produce()	650972.2 Ops/sec

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/immer@3.1.3/dist/immer.umd.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js"></script>

Script Preparation code:

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:

_.cloneDeep()
const result = _.cloneDeep(state); result.data.data1.data2 = 'updated';
AngularJS copy
const result = angular.copy(state); result.data.data1.data2 = 'updated';
JSON.parse
const result = JSON.parse(JSON.stringify((state))); result.data.data1.data2 = 'updated';
immer.produce()
const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' })

Run results for: Immer produce() vs Lodash cloneDeep() vs AngularJS copy() vs JSON.parse()

Objects immutability test

_.cloneDeep()

AngularJS copy

JSON.parse

immer.produce()