mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.3 KiB
JSON
17 lines
3.3 KiB
JSON
{
|
|
"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"
|
|
} |