update

devour_data/docs/create-selector.json

@@ -0,0 +1,17 @@
+{
+  "id": "7b0801b2ec325d4fc442e840",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "create-selector",
+  "content": "---\ntitle: createSelector\nuse_cases: \u003e-\n  selection states, active items, dropdown menus, tab navigation, list\n  highlighting, performance optimization\ntags:\n  - reactivity\n  - performance\n  - selection\n  - ui-state\n  - optimization\nversion: '1.0'\ndescription: \u003e-\n  Optimize selection state with createSelector. Reduce DOM updates from n to 2\n  when tracking active items in lists, tabs, or dropdowns.\n---\n\n```ts\nimport { createSelector } from \"solid-js\"\n\nfunction createSelector\u003cT, U\u003e(\n\tsource: () =\u003e T,\n\tfn?: (a: U, b: T) =\u003e boolean\n): (key: U) =\u003e boolean\n```\n\nCreates a parameterized derived boolean signal `selector(key)` that indicates\nwhether `key` is equal to the current value of the `source` signal.\nThese signals are optimized to notify each subscriber only when their `key`\nstarts or stops matching the reactive `source` value\n(instead of every time `key` changes).\nIf you have *n* different subscribers with different keys,\nand the `source` value changes from `a` to `b`, then\ninstead of all *n* subscribers updating,\nat most two subscribers will update:\nthe signal with key `a` will change to `false`,\nand the signal with key `b` will change to `true`.\nThus it reduces from *n* updates to 2 updates.\n\nUseful for defining the selection state of several selectable elements.\nFor example:\n\n```tsx\nconst [selectedId, setSelectedId] = createSignal()\nconst isSelected = createSelector(selectedId)\n\n\u003cFor each={list()}\u003e\n\t{(item) =\u003e \u003cli classList={{ active: isSelected(item.id) }}\u003e{item.name}\u003c/li\u003e}\n\u003c/For\u003e\n```\n\nIn the code above, each `li` element receives an `active` class\nexactly when the corresponding `item.id` is equal to `selectedId()`.\nWhen the `selectedId` signal changes, the `li` element(s) that previously\nhad previously matching `id` get the `active` class removed, and the\n`li` element(s) that now have a matching `id` get the `active` class added.\nAll other `li` elements get skipped, so if `id`s are distinct,\nonly 2 DOM operations get performed.\n\nBy contrast, the following code would perform `list().length` DOM operations\nevery time the `selectedId` signal changes:\n\n```tsx\nconst [selectedId, setSelectedId] = createSignal()\n\n\u003cFor each={list()}\u003e\n\t{(item) =\u003e \u003cli classList={{ active: selectedId() === item.id }}\u003e{item.name}\u003c/li\u003e}\n\u003c/For\u003e\n```\n\n## Arguments\n\n| Name     | Type                      | Description                                  |\n| :------- | :------------------------ | :------------------------------------------- |\n| `source` | `() =\u003e T`                 | The source signal to get the value from and compare with keys. |\n| `fn`     | `(a: U, b: T) =\u003e boolean` | A function to compare the key and the value, returning whether they should be treated as equal. Default: `===` |",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-selector.mdx",
+  "metadata": {
+    "path": "src/routes/reference/secondary-primitives/create-selector.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 2715,
+    "source_type": "github"
+  },
+  "hash": "a38ff2b92689bc6f613b4105e79b9902a29ab9f1dbf793acebce3629bbf178f5",
+  "timestamp": "2026-02-23T11:43:00.190673559+01:00"
+}