Devour/devour_data/docs/create-render-effect.json

{
  "id": "d80911e87bb5d4a641f7d7e8",
  "source": "solid:signals",
  "type": "github-document",
  "title": "create-render-effect",
  "content": "---\ntitle: createRenderEffect\nuse_cases: \u003e-\n  dom manipulation during render, immediate effects, rendering phase logic,\n  ref-independent effects, custom rendering\ntags:\n  - rendering\n  - effects\n  - dom\n  - immediate\n  - refs\n  - lifecycle\nversion: \"1.0\"\ndescription: \u003e-\n  Execute effects immediately during rendering with createRenderEffect. Run side\n  effects as DOM creates, before refs are set or connected.\n---\n\nThe `createRenderEffect` primitive creates a reactive computation that automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function.\nThis function re-runs whenever any of its dependencies change.\n\n## Execution Timing\n\n### Initial Run\n\n- A render effect runs **synchronously during the current rendering phase**, while DOM elements are being created or updated.\n- It **runs before elements are mounted** to the DOM.\n- **[Refs](/concepts/refs) are not set** during this initial run.\n\n### Subsequent Runs\n\n- After the initial render, the render effect **re-runs whenever any of its tracked dependencies change**.\n- Re-runs occur **after** all pure computations (such as [memos](/concepts/derived-values/memos)) have completed within the same update cycle.\n- When multiple dependencies change within the same batch, the render effect **runs once per batch**.\n- The **order of re-runs** among multiple render effects is **not guaranteed**.\n\n### Server-Side Rendering\n\n- During SSR, render effects **run once on the server**, since they are part of the synchronous rendering phase.\n- On the client, an initial run still occurs during the client rendering phase to initialize the reactive system;\n  that client initial run is separate from the server run.\n- After hydration, subsequent runs occur on the client when dependencies change.\n\n## Import\n\n```ts\nimport { createRenderEffect } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction createRenderEffect\u003cNext\u003e(\n\tfn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e\n): void;\nfunction createRenderEffect\u003cNext, Init = Next\u003e(\n\tfn: EffectFunction\u003cInit | Next, Next\u003e,\n\tvalue: Init,\n\toptions?: { name?: string }\n): void;\nfunction createRenderEffect\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 render 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 render 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`createRenderEffect` does not return a value.\n\n## Examples\n\n### Basic Usage\n\n```tsx\nimport { createSignal, createRenderEffect } from \"solid-js\";\n\nfunction Counter() {\n\tconst [count, setCount] = createSignal(0);\n\n\t// This runs immediately during render, and re-runs when the count changes.\n\tcreateRenderEffect(() =\u003e {\n\t\tconsole.log(\"Count: \", 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- [`createEffect`](/reference/basic-reactivity/create-effect)\n- [`onCleanup`](/reference/lifecycle/on-cleanup)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-render-effect.mdx",
  "metadata": {
    "path": "src/routes/reference/secondary-primitives/create-render-effect.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 4741,
    "source_type": "github"
  },
  "hash": "830a2f2b4da7222566548b702fe7106e6735f3d15fffd13c0c9beb3aa1d4b2f3",
  "timestamp": "2026-02-23T11:43:00.190645727+01:00"
}