{
  "id": "64158242be5ffe195e690edf",
  "source": "solid:signals",
  "type": "github-document",
  "title": "create-effect",
  "content": "---\ntitle: createEffect\nuse_cases: \u003e-\n  dom manipulation, side effects, manual dom updates, vanilla js integration,\n  cleanup operations, logging changes\ntags:\n  - effects\n  - dom\n  - side-effects\n  - reactivity\n  - lifecycle\n  - cleanup\nversion: \"1.0\"\ndescription: \u003e-\n  Learn how to use createEffect to run side effects when reactive dependencies\n  change. Perfect for DOM manipulation and external library integration.\n---\n\nThe `createEffect` primitive creates a reactive computation.\nIt automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function.\nThis function will re-run whenever any of its dependencies change.\n\n## Execution Timing\n\n### Initial Run\n\n- The initial run of effects is **scheduled to occur after the current rendering phase completes**.\n- It runs after all synchronous code in a component has finished and DOM elements have been created, but **before the browser paints them on the screen**.\n- **[Refs](/concepts/refs) are set** before the first run, even though DOM nodes may not yet be attached to the main document tree.\n  This is relevant when using the [`children`](/reference/component-apis/children) helper.\n\n### Subsequent Runs\n\n- After the initial run, the effect **re-runs whenever any tracked dependency changes**.\n- When multiple dependencies change within the same batch, the effect **runs once per batch**.\n- The **order of runs** among multiple effects is **not guaranteed**.\n- Effects always run **after** all pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle.\n\n### Server-Side Rendering\n\n- Effects **never run during SSR**.\n- Effects also **do not run during the initial client hydration**.\n\n## Import\n\n```ts\nimport { createEffect } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createEffect\u003cNext\u003e(\n\tfn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e\n): void;\nfunction createEffect\u003cNext, Init = Next\u003e(\n\tfn: EffectFunction\u003cInit | Next, Next\u003e,\n\tvalue: Init,\n\toptions?: { name?: string }\n): void;\nfunction createEffect\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 | EffectFunction\u003cInit | Next, Next\u003e`\n- **Required:** Yes\n\nA function to be executed as the effect.\n\nIt receives the value returned from the previous run, or the initial `value` during the first run.\nThe value returned by `fn` is passed to the next run.\n\n### `value`\n\n- **Type:** `Init`\n- **Required:** No\n\nThe initial value passed to `fn` during its first run.\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 name for the effect, which can be useful for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools).\n\n## Return value\n\n`createEffect` does not return a value.\n\n## Examples\n\n### Basic Usage\n\n```tsx\nimport { createSignal, createEffect } from \"solid-js\";\n\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\n\t// Every time count changes, this effect re-runs.\n\tcreateEffect(() =\u003e {\n\t\tconsole.log(\"Count incremented! New value: \", count());\n\t});\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cp\u003eCount: {count()}\u003c/p\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003eIncrement\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Execution Timing\n\n```tsx\nimport { createSignal, createEffect, createRenderEffect } from \"solid-js\";\n\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\n\t// This is part of the component's synchronous execution.\n\tconsole.log(\"Hello from counter\");\n\n\t// This effect is scheduled to run after the initial render is complete.\n\tcreateEffect(() =\u003e {\n\t\tconsole.log(\"Effect:\", count());\n\t});\n\n\t// By contrast, a render effect runs synchronously during the render phase.\n\tcreateRenderEffect(() =\u003e {\n\t\tconsole.log(\"Render effect:\", count());\n\t});\n\n\t// Setting a signal during the render phase re-runs render effects, but not effects, which are\n\t// still scheduled.\n\tsetCount(1);\n\n\t// A microtask is scheduled to run after the current synchronous code (the render phase) finishes.\n\tqueueMicrotask(() =\u003e {\n\t\t// Now that rendering is complete, signal updates will trigger effects immediately.\n\t\tsetCount(2);\n\t});\n}\n\n// Output:\n// Hello from counter\n// Render effect: 0\n// Render effect: 1\n// Effect: 1\n// Render effect: 2\n// Effect: 2\n```\n\n## Related\n\n- [`createRenderEffect`](/reference/secondary-primitives/create-render-effect)\n- [`onCleanup`](/reference/lifecycle/on-cleanup)\n- [`onMount`](/reference/lifecycle/on-mount)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-effect.mdx",
  "metadata": {
    "path": "src/routes/reference/basic-reactivity/create-effect.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 4672,
    "source_type": "github"
  },
  "hash": "eb6f4338b6ce6ebe6bab3a26b9a29d9fd9b96444b4ece8259d0a7ec3a2ed2eb3",
  "timestamp": "2026-02-23T11:43:00.188414022+01:00"
}