{
  "id": "3a62f93f0686a05a6100093e",
  "source": "solid:signals",
  "type": "github-document",
  "title": "modify-mutable",
  "content": "---\ntitle: modifyMutable\nuse_cases: \u003e-\n  batch updates, mutable store modifications, performance optimization, multiple\n  field changes, reconciliation\ntags:\n  - store\n  - mutable\n  - batch\n  - performance\n  - updates\nversion: '1.0'\ndescription: \u003e-\n  Batch multiple mutable store changes with modifyMutable. Update multiple\n  fields in one render cycle for better performance.\n---\n\n`modifyMutable` streamlines the process of making multiple changes to a mutable Store, as obtained through the use of [`createMutable`](/reference/store-utilities/create-mutable).\n\nIt operates within a single [`batch`](/reference/reactive-utilities/batch), ensuring that dependent computations are updated just once, rather than triggering updates for each individual change.\n\n```tsx\nimport { modifyMutable } from \"solid-js/store\"\n\nfunction modifyMutable\u003cT\u003e(mutable: T, modifier: (state: T) =\u003e T): void\n```\n\nThe function takes two arguments:\n\n1. The first argument is the mutable Store that needs modification.\n2. The second argument is a Store modifier, which could be one of those returned by [`reconcile`](/reference/store-utilities/reconcile).\n\n:::caution\n\tWhen passing in your own modifier function, it's important to be aware that\n\tits argument is an unwrapped version of the store.\n:::\n\nFor example, if the UI depends on multiple fields of a mutable:\n\n```tsx\nimport { createMutable } from \"solid-js/store\"\n\nconst state = createMutable({\n\tuser: {\n\t\tfirstName: \"John\",\n\t\tlastName: \"Smith\",\n\t},\n});\n\n\u003ch1\u003eHello {state.user.firstName + \" \" + state.user.lastName}\u003c/h1\u003e;\n```\n\nModifying n fields in sequence will cause the UI to update n times:\n\n```tsx\nstate.user.firstName = \"Jane\";\nstate.user.lastName = \"Doe\";\n```\n\nTo trigger just a single update, the fields can be modified using a `batch`:\n\n```tsx\nimport { batch } from \"solid-js\"\n\nbatch(() =\u003e {\n\tstate.user.firstName = \"Jane\";\n\tstate.user.lastName = \"Doe\";\n});\n```\n\n`modifyMutable` combined with [`reconcile`](/reference/store-utilities/reconcile) or [`produce`](/reference/store-utilities/produce) provides two alternate ways to do similar things:\n\n```tsx\nimport { modifyMutable, reconcile } from \"solid-js/store\"\n\n// Replace state.user with the specified object (deleting any other fields)\nmodifyMutable(\n\tstate.user,\n\treconcile({\n\t\tfirstName: \"Jane\",\n\t\tlastName: \"Doe\",\n\t})\n);\n```\n\n```tsx\nimport { modifyMutable, produce } from \"solid-js/store\"\n\n// Modify two fields in a batch, triggering just one update\nmodifyMutable(\n\tstate,\n\tproduce((state) =\u003e {\n\t\tstate.user.firstName = \"Jane\";\n\t\tstate.user.lastName = \"Doe\";\n\t})\n);\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/modify-mutable.mdx",
  "metadata": {
    "path": "src/routes/reference/store-utilities/modify-mutable.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2566,
    "source_type": "github"
  },
  "hash": "04edb0ccb7638f2376e3371a02bd660d0134b01f238b7b380cebbe522e11e2c1",
  "timestamp": "2026-02-23T11:43:00.190867884+01:00"
}