{
  "id": "1a77e939d244345772133842",
  "source": "solid:signals",
  "type": "github-document",
  "title": "create-computed",
  "content": "---\ntitle: createComputed\nuse_cases: \u003e-\n  immediate reactivity, building primitives, side effects with dependencies,\n  reactive updates, custom reactive patterns\ntags:\n  - reactivity\n  - computation\n  - primitives\n  - effects\n  - tracking\nversion: \"1.0\"\ndescription: \u003e-\n  Create immediate reactive computations with createComputed. Build custom\n  primitives and handle side effects that respond to dependencies.\n---\n\nThe `createComputed` function creates a reactive computation that runs _before_ the rendering phase.\nIt is primarily used to synchronize state before rendering begins.\n\n## Import\n\n```ts\nimport { createComputed } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createComputed\u003cNext\u003e(\n\tfn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e\n): void;\nfunction createComputed\u003cNext, Init = Next\u003e(\n\tfn: EffectFunction\u003cInit | Next, Next\u003e,\n\tvalue: Init,\n\toptions?: { name?: string }\n): void;\nfunction createComputed\u003cNext, Init\u003e(\n\tfn: EffectFunction\u003cInit | Next, Next\u003e,\n\tvalue?: Init,\n\toptions?: { name?: string }\n): void;\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e | EffectFunction\u003cInit | Next, Next\u003e`\n- **Required:** Yes\n\nThe function that performs the computation.\nIt executes immediately to track dependencies and re-runs whenever a dependency changes.\n\nIt receives the value returned from the previous execution as its argument.\nOn the initial execution, it receives the [`value`](#value) parameter (if provided) or `undefined`.\n\n### `value`\n\n- **Type:** `Init`\n- **Required:** No\n\nThe initial value passed to `fn` on its first execution.\n\n### `options`\n\n- **Type:** `{ name?: string }`\n- **Required:** No\n\nAn optional configuration object with the following properties:\n\n#### `name`\n\n- **Type:** `string`\n- **Required:** No\n\nA debug name for the computation.\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:** `void`\n\n`createComputed` does not return a value.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { createComputed } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\ntype User = {\n\tname?: string;\n};\n\ntype UserEditorProps = {\n\tuser: User;\n};\n\nfunction UserEditor(props: UserEditorProps) {\n\tconst [formData, setFormData] = createStore\u003cUser\u003e({\n\t\tname: \"\",\n\t});\n\n\t// Update the store synchronously when props change.\n\t// This prevents a second render cycle.\n\tcreateComputed(() =\u003e {\n\t\tsetFormData(\"name\", props.user.name);\n\t});\n\n\treturn (\n\t\t\u003cform\u003e\n\t\t\t\u003ch1\u003eEditing: {formData.name}\u003c/h1\u003e\n\t\t\t\u003cinput\n\t\t\t\tvalue={formData.name}\n\t\t\t\tonInput={(e) =\u003e setFormData(\"name\", e.currentTarget.value)}\n\t\t\t/\u003e\n\t\t\u003c/form\u003e\n\t);\n}\n```\n\n## Related\n\n- [`createMemo`](/reference/basic-reactivity/create-memo)\n- [`createRenderEffect`](/reference/secondary-primitives/create-render-effect)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-computed.mdx",
  "metadata": {
    "path": "src/routes/reference/secondary-primitives/create-computed.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2834,
    "source_type": "github"
  },
  "hash": "37d216b7ce647893191be65ef19916ed67c96521c9723cb0e3235d27eee57a19",
  "timestamp": "2026-02-23T11:43:00.190524429+01:00"
}