update

devour_data/docs/on-util.json

@@ -0,0 +1,17 @@
+{
+  "id": "14e4ed234688c25c31cba1fa",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "on-util",
+  "content": "---\ntitle: 'on'\nuse_cases: \u003e-\n  explicit dependencies, effect control, conditional tracking, deferred\n  execution, store tracking\ntags:\n  - effects\n  - dependencies\n  - tracking\n  - stores\n  - reactive\n  - defer\nversion: '1.0'\ndescription: \u003e-\n  Control effect dependencies explicitly with SolidJS's on utility. Define when\n  effects run and manage tracking behavior for precise reactivity.\n---\n\n```ts\nimport { on } from \"solid-js\"\n\nfunction on\u003cT extends Array\u003c() =\u003e any\u003e | (() =\u003e any), U\u003e(\n\tdeps: T,\n\tfn: (input: T, prevInput: T, prevValue?: U) =\u003e U,\n\toptions: { defer?: boolean } = {}\n): (prevValue?: U) =\u003e U | undefined\n```\n\n`on` is designed to be passed into a computation to make its dependencies explicit.\nIf an array of dependencies is passed, `input` and `prevInput` are arrays.\n\n```ts\ncreateEffect(on(a, (v) =\u003e console.log(v, b())));\n\n// is equivalent to:\ncreateEffect(() =\u003e {\n\tconst v = a();\n\tuntrack(() =\u003e console.log(v, b()));\n});\n```\n\nYou can also not run the computation immediately and instead opt in for it to only run on change by setting the defer option to true.\n\n```ts\n// doesn't run immediately\ncreateEffect(on(a, (v) =\u003e console.log(v), { defer: true }));\n\nsetA(\"new\"); // now it runs\n```\n\n## Using `on` with stores\n\n:::note\n\tPlease note that on stores and mutable, adding or removing a property from the\n\tparent object will trigger an effect. See [`createMutable`](/reference/store-utilities/create-mutable)\n\n:::\n\n```ts\nconst [state, setState] = createStore({ a: 1, b: 2 });\n\n// this will not work\ncreateEffect(on(state.a, (v) =\u003e console.log(v)));\n\nsetState({ a: 3 }); // logs nothing\n\n// instead, use an arrow function\ncreateEffect(\n\ton(\n\t\t() =\u003e state.a,\n\t\t(v) =\u003e console.log(v)\n\t)\n);\n\nsetState({ a: 4 }); // logs 4\n```\n\n## Arguments and options\n\n| Argument | Type                                           | Description                                       |\n| :------- | :--------------------------------------------- | :------------------------------------------------ |\n| deps     | `T`                                            | The dependencies to watch.                        |\n| fn       | `(input: T, prevInput: T, prevValue?: U) =\u003e U` | The function to run when the dependencies change. |\n| options  | `{ defer?: boolean }`                          | Options to configure the effect.                  |",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/on-util.mdx",
+  "metadata": {
+    "path": "src/routes/reference/reactive-utilities/on-util.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 2339,
+    "source_type": "github"
+  },
+  "hash": "e0f625947a170fb3a9c93e297cc2e708d6cafb6e8917eddcc3b3fb2760ac8f40",
+  "timestamp": "2026-02-23T11:43:00.19006238+01:00"
+}