You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/routes/reference/basic-reactivity/create-effect.mdx
+19-13Lines changed: 19 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,19 +22,24 @@ This function will re-run whenever any of its dependencies change.
22
22
23
23
## Execution Timing
24
24
25
-
- The initial execution of effects is scheduled to occur **after the current rendering phase completes**.
26
-
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**.
25
+
### Initial Run
27
26
28
-
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**.
29
-
This is particularly relevant when using the [`children`](/reference/component-apis/children) function.
27
+
- The initial run of effects is **scheduled to occur after the current rendering phase completes**.
28
+
- 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**.
29
+
-**[Refs](/concepts/refs) are set** before the first run, even though DOM nodes may not yet be attached to the main document tree.
30
+
This is relevant when using the [`children`](/reference/component-apis/children) helper.
30
31
31
-
- After the initial execution, effects will re-run whenever any of their dependencies change.
32
+
### Subsequent Runs
32
33
33
-
When multiple dependencies are updated within the same batch, the effect will only run once.
34
+
- After the initial run, the effect **re-runs whenever any tracked dependency changes**.
35
+
- When multiple dependencies change within the same batch, the effect **runs once per batch**.
36
+
- The **order of runs** among multiple effects is **not guaranteed**.
37
+
- Effects always run **after** all pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle.
34
38
35
-
- The order in which effects run is **not guaranteed**.
36
-
- Effects always run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle.
37
-
- Effects **are not executed** during Server-Side Rendering (SSR) or during the initial client hydration.
39
+
### Server-Side Rendering
40
+
41
+
- Effects **never run during SSR**.
42
+
- Effects also **do not run during the initial client hydration**.
38
43
39
44
## Import
40
45
@@ -67,16 +72,17 @@ function createEffect<Next, Init>(
Copy file name to clipboardExpand all lines: src/routes/reference/secondary-primitives/create-render-effect.mdx
+19-11Lines changed: 19 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,18 +21,25 @@ This function re-runs whenever any of its dependencies change.
21
21
22
22
## Execution Timing
23
23
24
-
- The initial execution of render effects occurs **during the current rendering phase**.
25
-
It runs synchronously while DOM elements are being created and updated, but **before they are mounted**.
24
+
### Initial Run
26
25
27
-
As a result, refs are **not set** before the render effect runs for the first time.
26
+
- A render effect runs **synchronously during the current rendering phase**, while DOM elements are being created or updated.
27
+
- It **runs before elements are mounted** to the DOM.
28
+
-**[Refs](/concepts/refs) are not set** during this initial run.
28
29
29
-
- After the initial execution, render effects will re-run whenever any of their dependencies change.
30
+
### Subsequent Runs
30
31
31
-
Render effects always re-run **after** any pure computations (such as [memos](/concepts/derived-values/memos)) are executed within the same update cycle.
32
+
- After the initial render, the render effect **re-runs whenever any of its tracked dependencies change**.
33
+
- Re-runs occur **after** all pure computations (such as [memos](/concepts/derived-values/memos)) have completed within the same update cycle.
34
+
- When multiple dependencies change within the same batch, the render effect **runs once per batch**.
35
+
- The **order of re-runs** among multiple render effects is **not guaranteed**.
32
36
33
-
When multiple dependencies are updated within the same batch, the render effect will only run once.
37
+
### Server-Side Rendering
34
38
35
-
The order in which render effects re-run is **not guaranteed**.
39
+
- During SSR, render effects **run once on the server**, since they are part of the synchronous rendering phase.
40
+
- On the client, an initial run still occurs during the client rendering phase to initialize the reactive system;
41
+
that client initial run is separate from the server run.
42
+
- After hydration, subsequent runs occur on the client when dependencies change.
36
43
37
44
## Import
38
45
@@ -65,16 +72,17 @@ function createRenderEffect<Next, Init>(
0 commit comments