Benchmark: Lodash CloneDeep vs Immer

HTML Preparation code:

<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 Preparation code:

state =  {
    "id": "6679216102cebc200887401f",
    "name": "New Form",
    "fields": [
        {
            "id": "e667921669aeeda3469cf2510",
            "fieldType": "text",
            "value": "<p style=\"text-align: left;\"><span style=\"font-size: 40px;\"><strong>Phone Verification</strong></span></p>",
            "styles": {
                "font-family": "Inter",
                "margin": "10px 0",
                "font-weight": 400
            },
            "subType": "form-heading",
            "configs": {
                "data": []
            }
        },
        {
            "id": "e6679217e61efbbf6dda4ba02",
            "label": {
                "text": "Phone Number",
                "alignment": "left"
            },
            "fieldType": "phone",
            "attributes": {
                "placeholder": "e.g. 9769235488",
                "type": "tel",
                "pattern": "[0-9]{10}",
                "maxlength": 15,
                "required": true
            },
            "configs": {
                "requireVerification": true,
                "proceedBtnText": "OK",
                "repeatingCount": 1
            },
            "mappedId": "t1"
        },
        {
            "id": "e66792166fc8a7b2e45b324a3",
            "configs": {
                "captchaType": "reCaptchaV3"
            },
            "fieldType": "captcha"
        },
        {
            "id": "e66792166273f92becb49f156",
            "fieldType": "button",
            "text": "Submit"
        }
    ],
    "fieldStyles": {
        "label": {
            "color": "#4a4a4a",
            "text-transform": "none",
            "text-shadow": "0px 0px 0px transparent",
            "font-size": "14px"
        },
        "input": {
            "color": "#000",
            "box-shadow": "0px 0px 0px 0px #000",
            "font-weight": "400",
            "font-size": "14px",
            "border-bottom-color": "#e8e8e8",
            "border-bottom-width": "1px",
            "border-bottom-style": "solid",
            "border-left-color": "#e8e8e8",
            "border-left-style": "solid",
            "border-left-width": "1px",
            "border-right-color": "#e8e8e8",
            "border-right-style": "solid",
            "border-right-width": "1px",
            "border-top-color": "#e8e8e8",
            "border-top-style": "solid",
            "border-top-width": "1px"
        },
        "helper": {
            "font-weight": "normal",
            "font-size": "10px",
            "text-transform": "none",
            "color": "#fff"
        },
        "helper2": {
            "color": "#000"
        }
    },
    "folderId": null,
    "styles": {
        "border-top-color": "#d9dfe8",
        "border-right-color": "#d9dfe8",
        "border-bottom-color": "#d9dfe8",
        "border-left-color": "#d9dfe8",
        "border-top-style": "solid",
        "border-right-style": "solid",
        "border-bottom-style": "solid",
        "border-left-style": "solid",
        "border-top-width": "1px",
        "border-right-width": "1px",
        "border-bottom-width": "1px",
        "border-left-width": "1px",
        "box-shadow": "0px 0px 0px 0px #000"
    },
    "configs": {
        "defaultLanguage": "en",
        "requireVerification": true,
        "activeTemplate": {
            "id": "form-design-27",
            "name": "form-design-27",
            "preview": "https://assets.frms.link/templates/Form27.png",
            "configs": null
        },
        "template": {
            "name": "form-design-27",
            "configs": {}
        },
        "enableWelcome": false,
        "enableThankyou": true,
        "inBrowserDataStorage": false,
        "thankyouIndex": 0,
        "verifyFirst": false,
        "mappedIdCount": {
            "t": 1,
            "n": 0,
            "d": 0,
            "m": 0
        }
    },
    "integrations": [],
    "thankyou": [
        {
            "id": "e6679216452b1c162a67c016a",
            "fieldType": "image",
            "attributes": {
                "src": "https://assets.frms.link/editor-assets/icons/tick-filled.svg"
            },
            "styles": {
                "width": "10%"
            }
        },
        {
            "id": "e66792164f26f431d234a61b4",
            "fieldType": "text",
            "value": "<p style=\"text-align: center;\">Your submission has been successfully recorded</p>",
            "styles": {
                "font-family": "Inter",
                "margin": "10px 0",
                "font-size": "20px",
                "line-height": "20px"
            }
        }
    ],
    "welcome": [
        {
            "id": "e667921645f194b63eae7542e",
            "fieldType": "text",
            "value": "<p style=\"text-align: center;\"><span style=\"font-size: 20pt;\">Welcome</span></p>",
            "styles": {
                "font-family": "Inter",
                "margin": "10px 0",
                "font-size": "20px",
                "line-height": "20px"
            }
        }
    ],
    "adminFields": [],
    "favouriteFields": [],
    "createdFrom": "scratch"
}

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Produce
CloneDeep

Lodash CloneDeep vs Immer (version: 0)

Comparing performance of: Produce vs CloneDeep

Created: one year ago by: Guest

Jump to the latest result

Produce

CloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results