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/(0)concepts/(2)derived-values/(0)derived-signals.mdx
+25-10Lines changed: 25 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,21 +13,34 @@ tags:
13
13
- state
14
14
version: "1.0"
15
15
description: >-
16
-
Create reactive derived values that automatically update when their
17
-
dependencies change using Solid's derived signals.
16
+
Derive values from signals with plain functions and use them in tracking
17
+
scopes to keep dependent computations up to date.
18
18
---
19
19
20
20
Derived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value.
21
21
22
-
These functions are not executed immediately, but instead are only called when the values they rely on are changed.
23
-
When the underlying signal is changed, the function will be called again to produce a new value.
22
+
A derived signal is a plain function: it runs when you call it, not automatically when a signal changes.
23
+
Each call reads the current signal values and calculates a new result.
24
24
25
25
```js
26
26
constdouble= () =>count() *2;
27
27
```
28
28
29
-
In the above example, the `double` function relies on the `count` signal to produce a value.
30
-
When the `count` signal is changed, the `double` function will be called again to produce a new value.
29
+
Calling `double()` reads `count()` and returns twice its current value.
30
+
Changing `count` alone does not call `double`.
31
+
If you call `double()` inside a tracking scope, such as an effect or a JSX expression, that scope tracks the `count()` read and runs again when `count` changes.
These dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application.
40
-
It is important to note that these functions do not store a value themselves; instead, they can update any effects or components that depend on them.
41
-
If included within a component's body, these derived signals will trigger an update when necessary.
52
+
Derived signals do not store or cache their results.
53
+
Calling one multiple times repeats the calculation each time.
54
+
Reading one at the top level of a component is a one-time read, since components do not re-run when signals change.
55
+
Use it inside JSX or another tracking scope when the result needs to stay up to date.
42
56
43
-
While you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive.
57
+
For a cached derived value, use [`createMemo`](/reference/basic-reactivity/create-memo).
58
+
A memo tracks its own dependencies and reuses its result until those dependencies change.
44
59
To dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).
0 commit comments