From a50d1ffb97eaedbee0d758981aacd9eaf57f959b Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Thu, 30 Oct 2025 17:49:02 +0330 Subject: [PATCH 01/10] Improve `createEffect` and `createRenderEffect` reference --- src/routes/concepts/effects.mdx | 6 + .../basic-reactivity/create-effect.mdx | 198 +++++++++++------- .../create-render-effect.mdx | 174 +++++++++++---- 3 files changed, 260 insertions(+), 118 deletions(-) diff --git a/src/routes/concepts/effects.mdx b/src/routes/concepts/effects.mdx index f6c4631e4..06a995f98 100644 --- a/src/routes/concepts/effects.mdx +++ b/src/routes/concepts/effects.mdx @@ -24,6 +24,12 @@ createEffect(() => { In this example, an effect is created that logs the current value of `count` to the console. When the value of `count` changes, the effect is triggered, causing it to run again and log the new value of `count`. +:::note +Effects are primarily intended for handling side effects that do not write to the reactive system. +It's best to avoid setting signals within effects, as this can lead to additional rendering or even infinite loops if not managed carefully. +Instead, it is recommended to use [createMemo](/reference/basic-reactivity/create-memo) to compute new values that rely on other reactive values. +::: + ## Managing dependencies Effects can be set to observe any number of dependencies. diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index 8a201215e..af530448c 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -2,103 +2,147 @@ title: createEffect --- -```tsx -import { createEffect } from "solid-js" +The `createEffect` primitive creates a reactive computation. +It automatically tracks reactive values, such as signals, that are accessed within the provided function. +This function re-runs whenever any of its dependencies change. + +## Execution Timing + +- The initial run of an effect is scheduled to run after the current rendering phase completes. + This means it runs after all synchronous code in a component has been executed, the JSX has been evaluated, and the initial DOM elements have been created and mounted, but before the browser paints them to the screen. + As a result, [refs](/concepts/refs) are set before an effect runs for the first time. +- If multiple dependencies are updated within the same batch, the effect only runs once. +- Effects always run after any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. +- The order in which effects run is not guaranteed. +- Effects are not run during Server-Side Rendering (SSR) or the initial client hydration. -function createEffect(fn: (v: T) => T, value?: T): void +## Import +```ts +import { createEffect } from "solid-js"; ``` -Effects are a general way to make arbitrary code ("side effects") run whenever dependencies change, e.g., to modify the DOM manually. -`createEffect` creates a new computation that runs the given function in a tracking scope, thus automatically tracking its dependencies, and automatically reruns the function whenever the dependencies update. +## Type + +```ts +function createEffect( + fn: EffectFunction, Next> +): void; +function createEffect( + fn: EffectFunction, + value: Init, + options?: { name?: string } +): void; +function createEffect( + fn: EffectFunction, + value?: Init, + options?: { name?: string } +): void; +``` -For example: +## Parameters -```tsx -const [a, setA] = createSignal(initialValue) +### `fn` -// effect that depends on signal `a` -createEffect(() => doSideEffect(a())) -``` +- **Type:** `EffectFunction | EffectFunction` +- **Required:** Yes -The effect will run whenever `a` changes value. +The function to run. +It receives the value returned from the previous run, or the initial `value` on the first run. +The value it returns is passed to the next run. -The effect will also run once, immediately after it is created, to initialize the DOM to the correct state. This is called the "mounting" phase. -However, we recommend using `onMount` instead, which is a more explicit way to express this. +### `value` -The effect callback can return a value, which will be passed as the `prev` argument to the next invocation of the effect. -This is useful for memoizing values that are expensive to compute. For example: +- **Type:** `Init` +- **Required:** No -```tsx -const [a, setA] = createSignal(initialValue) - -// effect that depends on signal `a` -createEffect((prevSum) => { - // do something with `a` and `prevSum` - const sum = a() + prevSum - if (sum !== prevSum) console.log("sum changed to", sum) - return sum -}, 0) -// ^ the initial value of the effect is 0 -``` +The initial value passed to `fn` on its first run. -Effects are meant primarily for side effects that read but don't write to the reactive system: it's best to avoid setting signals in effects, which without care can cause additional rendering or even infinite effect loops. Instead, prefer using [createMemo](/reference/basic-reactivity/create-memo) to compute new values that depend on other reactive values, so the reactive system knows what depends on what, and can optimize accordingly. -If you do end up setting a signal within an effect, computations subscribed to that signal will be executed only once the effect completes; see [`batch`](/reference/reactive-utilities/batch) for more detail. +### `options` -The first execution of the effect function is not immediate; it's scheduled to run after the current rendering phase (e.g., after calling the function passed to [render](/reference/rendering/render), [createRoot](/reference/reactive-utilities/create-root), or [runWithOwner](/reference/reactive-utilities/run-with-owner)). -If you want to wait for the first execution to occur, use [queueMicrotask](https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask) (which runs before the browser renders the DOM) or `await Promise.resolve()` or `setTimeout(..., 0)` (which runs after browser rendering). +- **Type:** `{ name?: string }` +- **Required:** No -```tsx -// assume this code is in a component function, so is part of a rendering phase -const [count, setCount] = createSignal(0) - -// this effect prints count at the beginning and when it changes -createEffect(() => console.log("count =", count())) -// effect won't run yet -console.log("hello") -setCount(1) // effect still won't run yet -setCount(2) // effect still won't run yet - -queueMicrotask(() => { - // now `count = 2` will print - console.log("microtask") - setCount(3) // immediately prints `count = 3` - console.log("goodbye") -}) - -// --- overall output: --- -// hello -// count = 2 -// microtask -// count = 3 -// goodbye -``` +An optional configuration object with the following properties: + +#### `name` + +- **Type:** `string` +- **Required:** No + +A name for the effect, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools). -This delay in first execution is useful because it means an effect defined in a component scope runs after the JSX returned by the component gets added to the DOM. -In particular, [refs](/reference/jsx-attributes/ref) will already be set. -Thus you can use an effect to manipulate the DOM manually, call vanilla JS libraries, or other side effects. +## Return value -Note that the first run of the effect still runs before the browser renders the DOM to the screen (similar to React's `useLayoutEffect`). -If you need to wait until after rendering (e.g., to measure the rendering), you can use `await Promise.resolve()` (or `Promise.resolve().then(...)`), but note that subsequent use of reactive state (such as signals) will not trigger the effect to rerun, as tracking is not possible after an async function uses `await`. -Thus you should use all dependencies before the promise. +`createEffect` does not return a value. -If you'd rather an effect run immediately even for its first run, use [createRenderEffect](/reference/secondary-primitives/create-render-effect) or [createComputed](/reference/secondary-primitives/create-computed). +## Examples + +### Basic Usage + +```tsx +import { createSignal, createEffect } from "solid-js"; + +function Counter() { + const [count, setCount] = createSignal(0); + + // Every time count changes this effect re-runs. + createEffect(() => { + console.log("Count incremented! New value: ", count()); + }); + + return ( +
+

Count: {count()}

+ +
+ ); +} +``` -You can clean up your side effects in between executions of the effect function by calling [onCleanup](/reference/lifecycle/on-cleanup) inside the effect function. -Such a cleanup function gets called both in between effect executions and when the effect gets disposed (e.g., the containing component unmounts). -For example: +### Execution Timing ```tsx -// listen to event dynamically given by eventName signal -createEffect(() => { - const event = eventName() - const callback = (e) => console.log(e) - ref.addEventListener(event, callback) - onCleanup(() => ref.removeEventListener(event, callback)) -}) +import { createSignal, createEffect, createRenderEffect } from "solid-js"; + +function Counter() { + const [count, setCount] = createSignal(0); + + // This is part of the component's synchronous execution. + console.log("Hello from counter"); + + // This effect is scheduled to run after the initial render is complete. + createEffect(() => { + console.log("Effect:", count()); + }); + + // By contrast, a render effect runs synchronously during the render phase. + createRenderEffect(() => { + console.log("Render effect:", count()); + }); + + // Setting a signal during the render phase re-runs render effects, but not effects, which are + // still scheduled. + setCount(1); + + // A microtask is scheduled to run after the current synchronous code (the render phase) finishes. + queueMicrotask(() => { + // Now that rendering is complete, signal updates will trigger effects immediately. + setCount(2); + }); +} + +// Output: +// Hello from counter +// Render effect: 0 +// Render effect: 1 +// Effect: 1 +// Render effect: 2 +// Effect: 2 ``` -## Arguments +## Related -- `fn` - The function to run in a tracking scope. It can return a value, which will be passed as the `prev` argument to the next invocation of the effect. -- `value` - The initial value of the effect. This is useful for memoizing values that are expensive to compute. +- [`createRenderEffect`](/reference/secondary-primitives/create-render-effect) +- [`onCleanup`](/reference/lifecycle/on-cleanup) +- [`onMount`](/reference/lifecycle/on-mount) diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index bf8a77852..593751d10 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -2,56 +2,148 @@ title: createRenderEffect --- +The `createRenderEffect` primitive creates a reactive computation. +It automatically tracks reactive values, such as signals, that are accessed within the provided function. +This function re-runs whenever any of its dependencies change. + +Unlike [`createEffect`](/reference/basic-reactivity/create-effect), which runs after the rendering phase is complete, `createRenderEffect` runs immediately as the component is being rendered. + +## Execution Timing + +- The initial run of a render effect happens during the current rendering phase. +- It runs as DOM elements are being created and updated, but before they are mounted. + As a result, refs are _not_ set before a render effect runs for the first time. +- If multiple dependencies are updated within the same batch, the render effect only runs once. +- Effects always run after any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. +- The order in which render effects run is not guaranteed. +- Render effects are not run during Server-Side Rendering (SSR). + +## Import + ```ts -import { createRenderEffect } from "solid-js" +import { createRenderEffect } from "solid-js"; +``` -function createRenderEffect(fn: (v: T) => T, value?: T): void +## Type +```ts +function createRenderEffect( + fn: EffectFunction, Next> +): void; +function createRenderEffect( + fn: EffectFunction, + value: Init, + options?: { name?: string } +): void; +function createRenderEffect( + fn: EffectFunction, + value?: Init, + options?: { name?: string } +): void; ``` -A render effect is a computation similar to a regular effect (as created by [`createEffect`](/reference/basic-reactivity/create-effect)), but differs in when Solid schedules the first execution of the effect function. -While `createEffect` waits for the current rendering phase to be complete, `createRenderEffect` immediately calls the function. -Thus the effect runs as DOM elements are being created and updated, but possibly before specific elements of interest have been created, and probably before those elements have been connected to the document. -In particular, **refs** will not be set before the initial effect call. -Indeed, Solid uses `createRenderEffect` to implement the rendering phase itself, including setting of **refs**. +## Parameters -Reactive updates to render effects are identical to effects: they queue up in response to a reactive change (e.g., a single signal update, or a batch of changes, or collective changes during an entire render phase) and run in a single [`batch`](/reference/reactive-utilities/batch) afterward (together with effects). -In particular, all signal updates within a render effect are batched. +### `fn` -Here is an example of the behavior. (Compare with the example in [`createEffect`](/reference/basic-reactivity/create-effect).) +- **Type:** `EffectFunction | EffectFunction` +- **Required:** Yes -```ts -// assume this code is in a component function, so is part of a rendering phase -const [count, setCount] = createSignal(0) - -// this effect prints count at the beginning and when it changes -createRenderEffect(() => console.log("count =", count())) -// render effect runs immediately, printing `count = 0` -console.log("hello") -setCount(1) // effect won't run yet -setCount(2) // effect won't run yet - -queueMicrotask(() => { - // now `count = 2` will print - console.log("microtask") - setCount(3) // immediately prints `count = 3` - console.log("goodbye") -}) - -// --- overall output: --- -// count = 0 [this is the only added line compared to createEffect] -// hello -// count = 2 -// microtask -// count = 3 -// goodbye +The function to run. +It receives the value returned from the previous run, or the initial `value` on the first run. +The value it returns is passed to the next run. + +### `value` + +- **Type:** `Init` +- **Required:** No + +The initial value passed to `fn` on its first run. + +### `options` + +- **Type:** `{ name?: string }` +- **Required:** No + +An optional configuration object with the following properties: + +#### `name` + +- **Type:** `string` +- **Required:** No + +A name for the render effect, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools). + +## Return value + +`createRenderEffect` does not return a value. + +## Examples + +### Basic Usage + +```tsx +import { createSignal, createRenderEffect } from "solid-js"; + +function Counter() { + const [count, setCount] = createSignal(0); + + // This runs immediately during render, and re-runs when the count changes. + createRenderEffect(() => { + console.log("Count: ", count()); + }); + + return ( +
+

Count: {count()}

+ +
+ ); +} ``` -Just like `createEffect`, the effect function gets called with an argument equal to the value returned from the effect function's last execution, or on the first call, equal to the optional second argument of `createRenderEffect`. +### Execution Timing + +```tsx +import { createSignal, createEffect, createRenderEffect } from "solid-js"; + +function Counter() { + const [count, setCount] = createSignal(0); + + // This is part of the component's synchronous execution. + console.log("Hello from counter"); + + // This effect is scheduled to run after the initial render is complete. + createEffect(() => { + console.log("Effect:", count()); + }); + + // By contrast, a render effect runs synchronously during the render phase. + createRenderEffect(() => { + console.log("Render effect:", count()); + }); + + // Setting a signal during the render phase re-runs render effects, but not effects, which are + // still scheduled. + setCount(1); + + // A microtask is scheduled to run after the current synchronous code (the render phase) finishes. + queueMicrotask(() => { + // Now that rendering is complete, signal updates will trigger effects immediately. + setCount(2); + }); +} + +// Output: +// Hello from counter +// Render effect: 0 +// Render effect: 1 +// Effect: 1 +// Render effect: 2 +// Effect: 2 +``` -## Arguments +## Related -| Name | Type | Description | -| :------ | :------------ | :----------------------------------------------------- | -| `fn` | `(v: T) => T` | The effect function to be called. | -| `value` | `T` | The initial value to be passed to the effect function. | +- [`createEffect`](/reference/basic-reactivity/create-effect) +- [`onCleanup`](/reference/lifecycle/on-cleanup) From 8aaa9fa5f390e0b25fca4a400cd15d92a45b2a2c Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Thu, 30 Oct 2025 19:16:39 +0330 Subject: [PATCH 02/10] DOM elements may not be mounted --- src/routes/reference/basic-reactivity/create-effect.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index 2c0098b27..6379c3a1c 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -20,7 +20,7 @@ This function re-runs whenever any of its dependencies change. ## Execution Timing - The initial run of an effect is scheduled to run after the current rendering phase completes. - This means it runs after all synchronous code in a component has been executed, the JSX has been evaluated, and the initial DOM elements have been created and mounted, but before the browser paints them to the screen. + This means it runs after all synchronous code in a component has been executed and the DOM elements have been created, but before the browser paints them to the screen. As a result, [refs](/concepts/refs) are set before an effect runs for the first time. - If multiple dependencies are updated within the same batch, the effect only runs once. - Effects always run after any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. From b0b367d0effd5def00accaba1b907617c1187e3e Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Sat, 1 Nov 2025 20:15:17 +0330 Subject: [PATCH 03/10] update --- .../reference/basic-reactivity/create-effect.mdx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index 62ba72271..f864e69a0 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -10,7 +10,7 @@ tags: - reactivity - lifecycle - cleanup -version: '1.0' +version: "1.0" description: >- Learn how to use createEffect to run side effects when reactive dependencies change. Perfect for DOM manipulation and external library integration. @@ -22,13 +22,14 @@ This function re-runs whenever any of its dependencies change. ## Execution Timing -- The initial run of an effect is scheduled to run after the current rendering phase completes. - This means it runs after all synchronous code in a component has been executed and the DOM elements have been created, but before the browser paints them to the screen. - As a result, [refs](/concepts/refs) are set before an effect runs for the first time. +- The initial run of an effect is scheduled to run **after the current rendering phase completes**. + - This means it runs after all synchronous code in a component has been executed and the DOM elements have been created, but **before the browser paints them to the screen**. + - As a result, [refs](/concepts/refs) **are set** before the effect runs for the first time, even though the DOM nodes may **not be attached to the main document tree**. + This is particularly relevant when using [`children`](/reference/component-apis/children). - If multiple dependencies are updated within the same batch, the effect only runs once. -- Effects always run after any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. -- The order in which effects run is not guaranteed. -- Effects are not run during Server-Side Rendering (SSR) or the initial client hydration. +- Effects always run **after** any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. +- The order in which effects run is **not guaranteed**. +- Effects are **not run** during Server-Side Rendering (SSR) or the initial client hydration. ## Import From cdf2b01b393d4aa98a7c936adf85a50da696136a Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Wed, 5 Nov 2025 18:08:37 +0330 Subject: [PATCH 04/10] update --- .../basic-reactivity/create-effect.mdx | 30 +++++++++-------- .../create-render-effect.mdx | 32 +++++++++---------- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index f864e69a0..d2fbe158e 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -17,19 +17,21 @@ description: >- --- The `createEffect` primitive creates a reactive computation. -It automatically tracks reactive values, such as signals, that are accessed within the provided function. -This function re-runs whenever any of its dependencies change. +It automatically tracks reactive values, such as [signals](/concepts/signals), that are accessed within the provided function. +This function will re-run whenever any of its dependencies change. ## Execution Timing -- The initial run of an effect is scheduled to run **after the current rendering phase completes**. - - This means it runs after all synchronous code in a component has been executed and the DOM elements have been created, but **before the browser paints them to the screen**. - - As a result, [refs](/concepts/refs) **are set** before the effect runs for the first time, even though the DOM nodes may **not be attached to the main document tree**. - This is particularly relevant when using [`children`](/reference/component-apis/children). -- If multiple dependencies are updated within the same batch, the effect only runs once. -- Effects always run **after** any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. +- The initial execution of an effect is scheduled to occur **after the current rendering phase completes**. + This means it runs after all synchronous code in a component has executed and the DOM elements have been created, but **before the browser renders them on the screen**. + + As a result, [refs](/concepts/refs) **are set** before the effect runs for the first time, even though the DOM nodes may **not be attached to the main document tree**. + This is particularly relevant when using the [`children`](/reference/component-apis/children) function. + - The order in which effects run is **not guaranteed**. -- Effects are **not run** during Server-Side Rendering (SSR) or the initial client hydration. +- When multiple dependencies are updated within the same batch, the effect will only run once. +- Effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. +- Effects **are not executed** during Server-Side Rendering (SSR) or during the initial client hydration. ## Import @@ -62,16 +64,16 @@ function createEffect( - **Type:** `EffectFunction | EffectFunction` - **Required:** Yes -The function to run. -It receives the value returned from the previous run, or the initial `value` on the first run. -The value it returns is passed to the next run. +The function to execute as the effect. +It receives the value returned from the previous execution, or the initial `value` during its first run. +The value returned by this function will be passed to the next execution. ### `value` - **Type:** `Init` - **Required:** No -The initial value passed to `fn` on its first run. +The initial value that is passed to `fn` during its first execution. ### `options` @@ -85,7 +87,7 @@ An optional configuration object with the following properties: - **Type:** `string` - **Required:** No -A name for the effect, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools). +A name for the effect, which can be useful for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). ## Return value diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index d5b5d229d..0890c4ffc 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -10,27 +10,27 @@ tags: - immediate - refs - lifecycle -version: '1.0' +version: "1.0" description: >- Execute effects immediately during rendering with createRenderEffect. Run side effects as DOM creates, before refs are set or connected. --- -The `createRenderEffect` primitive creates a reactive computation. -It automatically tracks reactive values, such as signals, that are accessed within the provided function. +The `createRenderEffect` primitive creates a reactive computation that automatically tracks reactive values, such as signals, accessed within the provided function. This function re-runs whenever any of its dependencies change. -Unlike [`createEffect`](/reference/basic-reactivity/create-effect), which runs after the rendering phase is complete, `createRenderEffect` runs immediately as the component is being rendered. +In contrast to [`createEffect`](/reference/basic-reactivity/create-effect), which executes after the rendering phase is complete, `createRenderEffect` runs immediately during the component's rendering phase. ## Execution Timing -- The initial run of a render effect happens during the current rendering phase. -- It runs as DOM elements are being created and updated, but before they are mounted. - As a result, refs are _not_ set before a render effect runs for the first time. -- If multiple dependencies are updated within the same batch, the render effect only runs once. -- Effects always run after any pure computations (like [memos](/concepts/derived-values/memos)) in the same update cycle. -- The order in which render effects run is not guaranteed. -- Render effects are not run during Server-Side Rendering (SSR). +- The initial execution of a render effect occurs **during the current rendering phase**. + It runs while DOM elements are being created and updated, but **before they are mounted**. + + As a result, refs are **not set** before the render effect runs for the first time. + +- After the initial run, the order in which render effects run is **not guaranteed**. +- If multiple dependencies are updated within the same batch, the render effect runs only once. +- Render effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. ## Import @@ -63,16 +63,16 @@ function createRenderEffect( - **Type:** `EffectFunction | EffectFunction` - **Required:** Yes -The function to run. -It receives the value returned from the previous run, or the initial `value` on the first run. -The value it returns is passed to the next run. +The function to execute as the render effect. +It receives the value returned from the previous execution, or the initial `value` during its the first run. +The value returned by this function will be passed to the next execution. ### `value` - **Type:** `Init` - **Required:** No -The initial value passed to `fn` on its first run. +The initial value that is passed to `fn` during its first execution. ### `options` @@ -86,7 +86,7 @@ An optional configuration object with the following properties: - **Type:** `string` - **Required:** No -A name for the render effect, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools). +A name for the render effect, which can be useful for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). ## Return value From d42f4913cc7a69503b0e9c0cccf70089b8032466 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Wed, 5 Nov 2025 18:22:46 +0330 Subject: [PATCH 05/10] update --- .../reference/secondary-primitives/create-render-effect.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index 0890c4ffc..4dd165819 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -29,7 +29,7 @@ In contrast to [`createEffect`](/reference/basic-reactivity/create-effect), whic As a result, refs are **not set** before the render effect runs for the first time. - After the initial run, the order in which render effects run is **not guaranteed**. -- If multiple dependencies are updated within the same batch, the render effect runs only once. +- When multiple dependencies are updated within the same batch, the render effect will only run once. - Render effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. ## Import From 42eb8874bd1d5aa83e2879264656eca4d0f6fc6e Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Wed, 5 Nov 2025 18:55:17 +0330 Subject: [PATCH 06/10] update --- .../reference/basic-reactivity/create-effect.mdx | 11 ++++++----- .../create-render-effect.mdx | 16 +++++++++------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index d2fbe158e..a8d797469 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -17,19 +17,20 @@ description: >- --- The `createEffect` primitive creates a reactive computation. -It automatically tracks reactive values, such as [signals](/concepts/signals), that are accessed within the provided function. +It automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function. This function will re-run whenever any of its dependencies change. ## Execution Timing -- The initial execution of an effect is scheduled to occur **after the current rendering phase completes**. - This means it runs after all synchronous code in a component has executed and the DOM elements have been created, but **before the browser renders them on the screen**. +- The initial execution of effects is scheduled to occur **after the current rendering phase completes**. + It runs after all synchronous code in a component has executed and the DOM elements have been created, but **before the browser renders them on the screen**. As a result, [refs](/concepts/refs) **are set** before the effect runs for the first time, even though the DOM nodes may **not be attached to the main document tree**. This is particularly relevant when using the [`children`](/reference/component-apis/children) function. +- After the initial execution, effects will re-run whenever any of their dependencies change. + When multiple dependencies are updated within the same batch, the effect will only run once. - The order in which effects run is **not guaranteed**. -- When multiple dependencies are updated within the same batch, the effect will only run once. - Effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. - Effects **are not executed** during Server-Side Rendering (SSR) or during the initial client hydration. @@ -103,7 +104,7 @@ import { createSignal, createEffect } from "solid-js"; function Counter() { const [count, setCount] = createSignal(0); - // Every time count changes this effect re-runs. + // Every time count changes, this effect re-runs. createEffect(() => { console.log("Count incremented! New value: ", count()); }); diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index 4dd165819..34a967985 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -16,20 +16,22 @@ description: >- effects as DOM creates, before refs are set or connected. --- -The `createRenderEffect` primitive creates a reactive computation that automatically tracks reactive values, such as signals, accessed within the provided function. +The `createRenderEffect` primitive creates a reactive computation that automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function. This function re-runs whenever any of its dependencies change. -In contrast to [`createEffect`](/reference/basic-reactivity/create-effect), which executes after the rendering phase is complete, `createRenderEffect` runs immediately during the component's rendering phase. - ## Execution Timing -- The initial execution of a render effect occurs **during the current rendering phase**. - It runs while DOM elements are being created and updated, but **before they are mounted**. +- The initial execution of render effects occurs **during the current rendering phase**. + It runs synchronously while DOM elements are being created and updated, but **before they are mounted**. As a result, refs are **not set** before the render effect runs for the first time. -- After the initial run, the order in which render effects run is **not guaranteed**. -- When multiple dependencies are updated within the same batch, the render effect will only run once. +- After the initial execution, render effects will re-run whenever any of their dependencies change. + + The order in which render effects re-run is **not guaranteed**. + + When multiple dependencies are updated within the same batch, the render effect will only run once. + - Render effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. ## Import From c1c1d5114c72b7f58ff01af56f775c0e38f5ed9d Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Wed, 5 Nov 2025 19:00:54 +0330 Subject: [PATCH 07/10] update --- src/routes/reference/basic-reactivity/create-effect.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index a8d797469..2d67e7944 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -29,7 +29,9 @@ This function will re-run whenever any of its dependencies change. This is particularly relevant when using the [`children`](/reference/component-apis/children) function. - After the initial execution, effects will re-run whenever any of their dependencies change. + When multiple dependencies are updated within the same batch, the effect will only run once. + - The order in which effects run is **not guaranteed**. - Effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. - Effects **are not executed** during Server-Side Rendering (SSR) or during the initial client hydration. From 43dfb39f282379b74efbad8e4115cd5dda1366bf Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Wed, 5 Nov 2025 19:14:20 +0330 Subject: [PATCH 08/10] update --- .../reference/secondary-primitives/create-render-effect.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index 34a967985..2d29b8772 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -27,12 +27,11 @@ This function re-runs whenever any of its dependencies change. As a result, refs are **not set** before the render effect runs for the first time. - After the initial execution, render effects will re-run whenever any of their dependencies change. - - The order in which render effects re-run is **not guaranteed**. + This happens **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. When multiple dependencies are updated within the same batch, the render effect will only run once. -- Render effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. + The order in which render effects re-run is **not guaranteed**. ## Import From c9c49a5c2e3e1ebc960e84b4c0cd9df3b326f890 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Wed, 5 Nov 2025 19:41:10 +0330 Subject: [PATCH 09/10] update --- .../reference/secondary-primitives/create-render-effect.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index 2d29b8772..b58e00884 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -27,7 +27,8 @@ This function re-runs whenever any of its dependencies change. As a result, refs are **not set** before the render effect runs for the first time. - After the initial execution, render effects will re-run whenever any of their dependencies change. - This happens **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. + + Render effects always re-run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) are executed within the same update cycle. When multiple dependencies are updated within the same batch, the render effect will only run once. From e5c2058f2f72b71e7e83902e5c47741fdbbe024b Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Thu, 6 Nov 2025 18:44:02 +0330 Subject: [PATCH 10/10] update --- .../basic-reactivity/create-effect.mdx | 32 +++++++++++-------- .../create-render-effect.mdx | 30 ++++++++++------- 2 files changed, 38 insertions(+), 24 deletions(-) diff --git a/src/routes/reference/basic-reactivity/create-effect.mdx b/src/routes/reference/basic-reactivity/create-effect.mdx index 2d67e7944..84ee13f12 100644 --- a/src/routes/reference/basic-reactivity/create-effect.mdx +++ b/src/routes/reference/basic-reactivity/create-effect.mdx @@ -22,19 +22,24 @@ This function will re-run whenever any of its dependencies change. ## Execution Timing -- The initial execution of effects is scheduled to occur **after the current rendering phase completes**. - It runs after all synchronous code in a component has executed and the DOM elements have been created, but **before the browser renders them on the screen**. +### Initial Run - As a result, [refs](/concepts/refs) **are set** before the effect runs for the first time, even though the DOM nodes may **not be attached to the main document tree**. - This is particularly relevant when using the [`children`](/reference/component-apis/children) function. +- The initial run of effects is **scheduled to occur after the current rendering phase completes**. +- 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**. +- **[Refs](/concepts/refs) are set** before the first run, even though DOM nodes may not yet be attached to the main document tree. + This is relevant when using the [`children`](/reference/component-apis/children) helper. -- After the initial execution, effects will re-run whenever any of their dependencies change. +### Subsequent Runs - When multiple dependencies are updated within the same batch, the effect will only run once. +- After the initial run, the effect **re-runs whenever any tracked dependency changes**. +- When multiple dependencies change within the same batch, the effect **runs once per batch**. +- The **order of runs** among multiple effects is **not guaranteed**. +- Effects always run **after** all pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. -- The order in which effects run is **not guaranteed**. -- Effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. -- Effects **are not executed** during Server-Side Rendering (SSR) or during the initial client hydration. +### Server-Side Rendering + +- Effects **never run during SSR**. +- Effects also **do not run during the initial client hydration**. ## Import @@ -67,16 +72,17 @@ function createEffect( - **Type:** `EffectFunction | EffectFunction` - **Required:** Yes -The function to execute as the effect. -It receives the value returned from the previous execution, or the initial `value` during its first run. -The value returned by this function will be passed to the next execution. +A function to be executed as the effect. + +It receives the value returned from the previous run, or the initial `value` during the first run. +The value returned by `fn` is passed to the next run. ### `value` - **Type:** `Init` - **Required:** No -The initial value that is passed to `fn` during its first execution. +The initial value passed to `fn` during its first run. ### `options` diff --git a/src/routes/reference/secondary-primitives/create-render-effect.mdx b/src/routes/reference/secondary-primitives/create-render-effect.mdx index b58e00884..03ba5016b 100644 --- a/src/routes/reference/secondary-primitives/create-render-effect.mdx +++ b/src/routes/reference/secondary-primitives/create-render-effect.mdx @@ -21,18 +21,25 @@ This function re-runs whenever any of its dependencies change. ## Execution Timing -- The initial execution of render effects occurs **during the current rendering phase**. - It runs synchronously while DOM elements are being created and updated, but **before they are mounted**. +### Initial Run - As a result, refs are **not set** before the render effect runs for the first time. +- A render effect runs **synchronously during the current rendering phase**, while DOM elements are being created or updated. +- It **runs before elements are mounted** to the DOM. +- **[Refs](/concepts/refs) are not set** during this initial run. -- After the initial execution, render effects will re-run whenever any of their dependencies change. +### Subsequent Runs - Render effects always re-run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) are executed within the same update cycle. +- After the initial render, the render effect **re-runs whenever any of its tracked dependencies change**. +- Re-runs occur **after** all pure computations (such as [memos](/concepts/derived-values/memos)) have completed within the same update cycle. +- When multiple dependencies change within the same batch, the render effect **runs once per batch**. +- The **order of re-runs** among multiple render effects is **not guaranteed**. - When multiple dependencies are updated within the same batch, the render effect will only run once. +### Server-Side Rendering - The order in which render effects re-run is **not guaranteed**. +- During SSR, render effects **run once on the server**, since they are part of the synchronous rendering phase. +- On the client, an initial run still occurs during the client rendering phase to initialize the reactive system; + that client initial run is separate from the server run. +- After hydration, subsequent runs occur on the client when dependencies change. ## Import @@ -65,16 +72,17 @@ function createRenderEffect( - **Type:** `EffectFunction | EffectFunction` - **Required:** Yes -The function to execute as the render effect. -It receives the value returned from the previous execution, or the initial `value` during its the first run. -The value returned by this function will be passed to the next execution. +A function to be executed as the render effect. + +It receives the value returned from the previous run, or the initial `value` during the first run. +The value returned by `fn` is passed to the next run. ### `value` - **Type:** `Init` - **Required:** No -The initial value that is passed to `fn` during its first execution. +The initial value passed to `fn` during its first run. ### `options`