mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
4.6 KiB
JSON
17 lines
4.6 KiB
JSON
{
|
|
"id": "35c7dd3c3cad02e34780262a",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "batch",
|
|
"content": "---\ntitle: batch\nuse_cases: \u003e-\n performance optimization, multiple signal updates, reducing re-renders, bulk\n state changes, avoiding unnecessary recalculations\ntags:\n - performance\n - optimization\n - signals\n - batching\n - updates\nversion: '1.0'\ndescription: \u003e-\n Batch multiple signal updates in SolidJS to improve performance by reducing\n recalculations. Essential for optimizing complex state changes.\n---\n\n```ts\nimport { batch } from \"solid-js\"\n\nfunction batch\u003cT\u003e(fn: () =\u003e T): T\n```\n\n`batch` is a low-level API that batches updates together.\nMore precisely, `batch(fn)` holds the execution of downstream computations during the `fn` block, executing them all together once the block `fn` returns.\nThus, instead of a downstream computation executing after every dependency update, it will update just once at the end of the batch.\n\nBatching improves performance by avoiding unnecessary recalculation.\nSuppose you have a downstream memo `down` that depends on multiple upstream signals `up1`, `up2`, and `up3`:\n\n```ts\nimport { createSignal, createMemo, createEffect } from \"solid-js\"\nconst [up1, setUp1] = createSignal(1)\nconst [up2, setUp2] = createSignal(2)\nconst [up3, setUp3] = createSignal(3)\nconst down = createMemo(() =\u003e up1() + up2() + up3())\n// For illustration, monitor when `down` gets recomputed:\ncreateEffect(() =\u003e console.log(down())) // outputs 6\n```\n\nIf you directly update all of the upstream signals outside of batch mode, then `down` will recompute every time.\n\n```ts\nsetUp1(4) // recomputes down, outputs 9\nsetUp2(5) // recomputes down, outputs 12\nsetUp3(6) // recomputes down, outputs 15\n```\n\nIf instead you update the upstream signals within a `batch`, then `down` will update only once at the end:\n\n```ts\nbatch(() =\u003e {\n setUp1(10) // doesn't update down yet\n setUp2(10) // doesn't update down yet\n setUp3(10) // doesn't update down yet\n}) // recomputes down, outputs 30\n```\n\nThe impact is even more dramatic if you have *m* downstream computations (memos, effects, etc.) that each depends on *n* upstream signals.\nWithout batching, modifying all *n* upstream signals would cause *m n* updates to the downstream computations.\nWith batching, modifying all *n* upstream signals would cause *m* updates to the downstream computations.\nGiven that each update takes at least *n* time (just to read the upstream signals), this cost savings can be significant.\nBatching is also especially helpful when the downstream effects include DOM updates, which can be expensive.\n\nSolid uses `batch` internally to automatically batch updates for you in a few cases:\n\n* Within [`createEffect`](/reference/basic-reactivity/create-effect) and [`onMount`](/reference/lifecycle/on-mount) (unless they are outside a [root](/reference/reactive-utilities/create-root))\n* Within the [setter of a store](/reference/store-utilities/create-store#setter) (which can update several properties at once)\n* Within array methods (e.g. `Array.prototype.splice`) of a [mutable store](/reference/store-utilities/create-mutable) (which can update several elements at once)\n\nThese save you from having to use `batch` yourself in many cases.\nFor the most part, automatic batching should be transparent to you, because accessing a signal or memo will cause it to update if it is out of date (as of Solid 1.4).\nFor example:\n\n```ts\nbatch(() =\u003e {\n setUp1(11) // doesn't update down yet\n setUp2(11) // doesn't update down yet\n setUp3(11) // doesn't update down yet\n console.log(down()) // recomputes down, outputs 33\n setUp1(12) // doesn't update down yet\n setUp2(12) // doesn't update down yet\n setUp3(12) // doesn't update down yet\n}) // recomputes down, outputs 36\n```\n\nYou can think of `batch(fn)` as setting a global \"batch mode\" variable, calling the function `fn`, and then restoring the global variable to its previous value.\nThis means that you can nest `batch` calls, and they will form one big batch.\nIt also means that, if `fn` is asynchronous, only the updates before the first `await` will be batched.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/batch.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/reactive-utilities/batch.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 4014,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "b8f742c321f4ad8e1b74eb67faffa98f8cd1b93dfe29ac2f196188cc68095501",
|
|
"timestamp": "2026-02-23T11:43:00.189770742+01:00"
|
|
} |