Devour/devour_data/docs/create-memo.json

{
  "id": "0865e34d19b3fee276dd119a",
  "source": "solid:signals",
  "type": "github-document",
  "title": "create-memo",
  "content": "---\ntitle: createMemo\nuse_cases: \u003e-\n  expensive computations, derived values, performance optimization, caching\n  calculations, preventing duplicate work\ntags:\n  - memoization\n  - performance\n  - optimization\n  - derived-state\n  - caching\n  - reactivity\nversion: \"1.0\"\ndescription: \u003e-\n  Use createMemo to efficiently compute and cache derived values. Prevent\n  expensive recalculations and optimize your Solid.js application's performance.\n---\n\nThe `createMemo` function creates a read-only signal that derives its value from other reactive values.\nThe calculated value is memoized: the calculation runs only when dependencies change, and is reused when the value is read.\nWhen a dependency changes, the calculation re-executes.\nIf the new result is equal to the previous result (according to the [`equals`](#equals) option), the memo suppresses downstream updates.\n\n## Import\n\n```ts\nimport { createMemo } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createMemo\u003cT\u003e(\n\tfn: (v: T) =\u003e T,\n\tvalue?: T,\n\toptions?: { equals?: false | ((prev: T, next: T) =\u003e boolean); name?: string }\n): () =\u003e T;\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `(v: T) =\u003e T`\n- **Required:** Yes\n\nThe function that calculates the memo's value.\n\nIt receives the value returned from the previous execution as its argument.\nOn the first execution, it receives the `value` parameter (if provided) or `undefined`.\n\nThis function should be pure (it should not modify other reactive values).\n\n### `value`\n\n- **Type:** `T`\n- **Required:** No\n\nThe initial value passed to `fn` on its first execution.\n\n### `options`\n\n- **Type:** `{ equals?: false | ((prev: T, next: T) =\u003e boolean); name?: string }`\n- **Required:** No\n\nAn optional configuration object with the following properties:\n\n#### `equals`\n\n- **Type:** `false | ((prev: T, next: T) =\u003e boolean)`\n- **Required:** No\n\nA function that runs after each execution of `fn` to determine if the memo value has changed.\nIt receives the previous and the new value.\nIf it returns `true`, the values are considered equal and the memo does not trigger downstream updates.\n\nIf set to `false` (instead of a function), the memo triggers updates whenever it re-executes, even if the value is unchanged.\n\nDefaults to a function that compares values using strict equality (`===`).\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nA debug name for the memo.\nIt is used for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools).\n\n## Return value\n\n- **Type:** `() =\u003e T`\n\n`createMemo` returns a read-only accessor function.\nCalling this function returns the current memoized value.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { createSignal, createMemo, For } from \"solid-js\";\n\nconst NAMES = [\"Alice Smith\", \"Bob Jones\", \"Charlie Day\", \"David Lee\"];\n\nfunction FilterList() {\n\tconst [query, setQuery] = createSignal(\"\");\n\n\t// The function executes immediately to calculate the initial value.\n\t// It re-executes only when the `query` signal changes.\n\tconst filteredNames = createMemo(() =\u003e {\n\t\tconsole.log(\"Calculating list...\");\n\t\treturn NAMES.filter((name) =\u003e {\n\t\t\treturn name.toLowerCase().includes(query().toLowerCase());\n\t\t});\n\t});\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cinput\n\t\t\t\tvalue={query()}\n\t\t\t\tonInput={(e) =\u003e setQuery(e.currentTarget.value)}\n\t\t\t\tplaceholder=\"Search...\"\n\t\t\t/\u003e\n\n\t\t\t{/* Accessing the memo. If dependencies haven't changed, returns cached value. */}\n\t\t\t\u003cdiv\u003eCount: {filteredNames().length}\u003c/div\u003e\n\n\t\t\t\u003cul\u003e\n\t\t\t\t{/* Accessing the memo again does not trigger re-execution. */}\n\t\t\t\t\u003cFor each={filteredNames()}\u003e{(name) =\u003e \u003cli\u003e{name}\u003c/li\u003e}\u003c/For\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Custom equality check\n\n```tsx\nimport { createSignal, createMemo, createEffect } from \"solid-js\";\n\nfunction DateNormalizer() {\n\tconst [dateString, setDateString] = createSignal(\"2024-05-10\");\n\n\tconst dateObject = createMemo(\n\t\t() =\u003e {\n\t\t\treturn new Date(dateString());\n\t\t},\n\t\tundefined,\n\t\t{\n\t\t\t// Overrides the default strict equality check (===).\n\t\t\t// If this returns true, observers (like the Effect below) are NOT notified.\n\t\t\tequals: (prev, next) =\u003e {\n\t\t\t\treturn prev.getTime() === next.getTime();\n\t\t\t},\n\t\t}\n\t);\n\n\tcreateEffect(() =\u003e {\n\t\t// This effect runs only when the numeric time value changes,\n\t\t// ignoring new Date object references.\n\t\tconsole.log(\"Date changed to:\", dateObject().toISOString());\n\t});\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cinput\n\t\t\t\tvalue={dateString()}\n\t\t\t\tonInput={(e) =\u003e setDateString(e.currentTarget.value)}\n\t\t\t/\u003e\n\t\t\t{/* Setting the same date string creates a new Date object,\n          but `equals` prevents the update propagation. */}\n\t\t\t\u003cbutton onClick={() =\u003e setDateString(\"2024-05-10\")}\u003e\n\t\t\t\tReset to the same date\n\t\t\t\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Accessing previous value\n\n```tsx\nimport { createSignal, createMemo } from \"solid-js\";\n\nfunction TrendTracker() {\n\tconst [count, setCount] = createSignal(0);\n\n\tconst trend = createMemo(\n\t\t// The first argument `prev` is the return value of the previous execution.\n\t\t(prev) =\u003e {\n\t\t\tconst current = count();\n\t\t\tif (current === prev.value) return { value: current, label: \"Same\" };\n\t\t\treturn {\n\t\t\t\tvalue: current,\n\t\t\t\tlabel: current \u003e prev.value ? \"Up\" : \"Down\",\n\t\t\t};\n\t\t},\n\t\t// The second argument provides the initial value for `prev`.\n\t\t{ value: 0, label: \"Same\" }\n\t);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cdiv\u003eCurrent: {trend().value}\u003c/div\u003e\n\t\t\t\u003cdiv\u003eDirection: {trend().label}\u003c/div\u003e\n\n\t\t\t\u003cbutton onClick={() =\u003e setCount((c) =\u003e c + 1)}\u003eIncrement\u003c/button\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setCount((c) =\u003e c - 1)}\u003eDecrement\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Related\n\n- [`createComputed`](/reference/secondary-primitives/create-computed)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-memo.mdx",
  "metadata": {
    "path": "src/routes/reference/basic-reactivity/create-memo.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 5613,
    "source_type": "github"
  },
  "hash": "dd68e8a31dbba5ee0f89985098596ec392248ded793671e53e00c429e7e5969c",
  "timestamp": "2026-02-23T11:43:00.188456332+01:00"
}