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-memo.mdx
+27-15Lines changed: 27 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: createMemo
3
3
---
4
4
5
-
Memos let you efficiently use a derived value in many reactive computations.
5
+
Memos let you efficiently use a derived value in many reactive computations.
6
6
`createMemo` creates a readonly reactive value equal to the return value of the given function and makes sure that function only gets executed when its dependencies change.
In Solid, you often don't need to wrap functions in memos; you can alternatively just define and call a regular function to get similar reactive behavior.
29
-
The main difference is when you call the function in multiple reactive settings.
30
-
In this case, when the function's dependencies update, the function will get called multiple times unless it is wrapped in createMemo.
28
+
In Solid, you often don't need to wrap functions in memos; you can alternatively just define and call a regular function to get similar reactive behavior.
29
+
The main difference is when you call the function in multiple reactive settings.
30
+
In this case, when the function's dependencies update, the function will get called multiple times unless it is wrapped in createMemo.
31
31
For example:
32
32
33
33
```tsx
@@ -43,30 +43,42 @@ return (
43
43
)
44
44
```
45
45
46
-
When the username signal updates, searchForUser will get called just once.
46
+
When the username signal updates, searchForUser will get called just once.
47
47
If the returned user actually changed, the user memo updates, and then both list items will update automatically.
48
48
49
49
If we had instead defined user as a plain function `() => searchForUser(username())`, then `searchForUser` would have been called twice, once when updating each list item.
50
50
51
-
Another key difference is that a memo can shield dependents from updating when the memo's dependencies change but the resulting memo value doesn't.
52
-
Like [createSignal](/reference/basic-reactivity/create-signal), the derived signal made by `createMemo` updates (and triggers dependents to rerun) only when the value returned by the memo function actually changes from the previous value, according to JavaScript's `===` operator.
51
+
Another key difference is that a memo can shield dependents from updating when the memo's dependencies change but the resulting memo value doesn't.
52
+
Like [createSignal](/reference/basic-reactivity/create-signal), the derived signal made by `createMemo` updates (and triggers dependents to rerun) only when the value returned by the memo function actually changes from the previous value, according to JavaScript's `===` operator.
53
53
Alternatively, you can pass an options object with `equals` set to false to always update the memo when its dependencies change, or you can pass your own `equals` function for testing equality.
54
54
55
-
The memo function is called with an argument equal to the value returned from the previous execution of the memo function, or, on the first call, equal to the optional second argument to `createMemo`.
55
+
The memo function is called with an argument equal to the value returned from the previous execution of the memo function, or, on the first call, equal to the optional second argument to `createMemo`.
56
56
This is useful for reducing computations, such as:
57
57
58
58
```tsx
59
59
// track the sum of all values taken on by input() as it updates
60
60
const sum =createMemo((prev) =>input() +prev, 0)
61
61
```
62
62
63
-
The memo function should not change other signals by calling setters (it should be "pure").
63
+
The memo function should not change other signals by calling setters (it should be "pure").
64
64
This enables Solid to optimize the execution order of memo updates according to their dependency graph, so that all memos can update at most once in response to a dependency change.
Copy file name to clipboardExpand all lines: src/routes/reference/basic-reactivity/create-resource.mdx
+58-22Lines changed: 58 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: createResource
4
4
5
5
`createResource` takes an asynchronous fetcher function and returns a signal that is updated with the resulting data when the fetcher completes.
6
6
7
-
There are two ways to use `createResource`: you can pass the fetcher function as the sole argument, or you can additionally pass a source signal as the first argument.
7
+
There are two ways to use `createResource`: you can pass the fetcher function as the sole argument, or you can additionally pass a source signal as the first argument.
8
8
The source signal will retrigger the fetcher whenever it changes, and its value will be passed to the fetcher.
In these snippets, the fetcher is the function `fetchData`, and `data()` is undefined until `fetchData` finishes resolving.
19
-
In the first case, `fetchData` will be called immediately.
20
-
In the second, `fetchData` will be called as soon as `source` has any value other than false, null, or undefined.
18
+
In these snippets, the fetcher is the function `fetchData`, and `data()` is undefined until `fetchData` finishes resolving.
19
+
In the first case, `fetchData` will be called immediately.
20
+
In the second, `fetchData` will be called as soon as `source` has any value other than false, null, or undefined.
21
21
It will be called again whenever the value of `source` changes, and that value will always be passed to `fetchData` as its first argument.
22
22
23
-
You can call `mutate` to directly update the `data` signal (it works like any other signal setter).
23
+
You can call `mutate` to directly update the `data` signal (it works like any other signal setter).
24
24
You can also call refetch to rerun the fetcher directly, and pass an optional argument to provide additional info to the fetcher e.g `refetch(info)`.
25
25
26
-
`data` works like a normal signal getter: use `data()` to read the last returned value of `fetchData`.
26
+
`data` works like a normal signal getter: use `data()` to read the last returned value of `fetchData`.
27
27
But it also has extra reactive properties:
28
28
29
29
-`data.loading`: whether the fetcher has been called but not returned.
@@ -33,18 +33,18 @@ But it also has extra reactive properties:
33
33
- Fetcher throws an `Error` instance, `data.error` will be that instance.
34
34
- If the fetcher throws a string, `data.error.message` will contain that string.
35
35
- When the fetcher throws a value that is neither an `Error` nor a string, that value will be available as `data.error.cause`.
36
-
37
-
- As of **v1.4.0**, `data.latest` returns the last value received and will not trigger [Suspense](/reference/components/suspense) or [transitions](#TODO); if no value has been returned yet, `data.latest` will act the same as `data()`.
36
+
37
+
- As of **v1.4.0**, `data.latest` returns the last value received and will not trigger [Suspense](/reference/components/suspense) or [transitions](#TODO); if no value has been returned yet, `data.latest` will act the same as `data()`.
38
38
This can be useful if you want to show the out-of-date data while the new data is loading.
39
39
40
40
`loading`, `error`, and `latest` are reactive getters and can be tracked.
41
41
42
42
## The fetcher
43
43
44
44
The `fetcher` is the async function that you provide to `createResource` to actually fetch the data.
45
-
It is passed two arguments: the value of the source signal (if provided), and an info object with two properties: `value` and `refetching`.
46
-
The `value` property tells you the previously fetched value.
47
-
The `refetching` property is true if the `fetcher` was triggered using the refetch function and false otherwise.
45
+
It is passed two arguments: the value of the source signal (if provided), and an info object with two properties: `value` and `refetching`.
46
+
The `value` property tells you the previously fetched value.
47
+
The `refetching` property is true if the `fetcher` was triggered using the refetch function and false otherwise.
48
48
If the `refetch` function was called with an argument (`refetch(info)`), refetching is set to that argument.
1. We've added a new state field which covers a more detailed view of the Resource state beyond `loading` and `error`.
96
+
1. We've added a new state field which covers a more detailed view of the Resource state beyond `loading` and `error`.
97
97
You can now check whether a Resource is `unresolved`, `pending`, `ready`, `refreshing`, or `errored`.
98
98
99
99
| State | Value resolved | Loading | Has error |
@@ -105,7 +105,7 @@ You can now check whether a Resource is `unresolved`, `pending`, `ready`, `refre
105
105
|`errored`| No | No | Yes |
106
106
107
107
2. When server-rendering resources, especially when embedding Solid in other systems that fetch data before rendering, you might want to initialize the resource with this prefetched value instead of fetching again and having the resource serialize it in its own state.
108
-
You can use the new `ssrLoadFrom` option for this.
108
+
You can use the new `ssrLoadFrom` option for this.
109
109
Instead of using the default `server` value, you can pass `initial` and the resource will use `initialValue` as if it were the result of the first fetch for both SSR and hydration.
| name |`string`|`undefined`| A name for the resource. This is used for debugging purposes. |
151
-
| deferStream |`boolean`|`false`| If true, Solid will wait for the resource to resolve before flushing the stream. |
152
-
| initialValue |`any`|`undefined`| The initial value of the resource. |
153
-
| onHydrated |`function`|`undefined`| A callback that is called when the resource is hydrated. |
154
-
| ssrLoadFrom |`"server" \| "initial"`|`"server"`| The source of the initial value for SSR. If set to `"initial"`, the resource will use the `initialValue` option instead of the value returned by the fetcher. |
155
-
| storage |`function`|`createSignal`| A function that returns a signal. This can be used to create a custom storage for the resource. This is still experimental |
148
+
### `name`
149
+
150
+
**Type**: `string`
151
+
152
+
A name for the resource.
153
+
This is used for debugging purposes.
154
+
155
+
### `deferStream`
156
+
157
+
**Type**: `boolean`
158
+
159
+
**Default**: `false`
160
+
161
+
If true, Solid will wait for the resource to resolve before flushing the stream.
162
+
163
+
### `initialValue`
164
+
165
+
**Type**: `any`
166
+
167
+
The initial value of the resource.
168
+
169
+
### `onHydrated`
170
+
171
+
**Type**: `function`
172
+
173
+
A callback that is called when the resource is hydrated.
174
+
175
+
### `ssrLoadFrom`
176
+
177
+
**Type**: `"server" | "initial"`
178
+
179
+
**Default**: `"server"`
180
+
181
+
The source of the initial value for SSR.
182
+
If set to `"initial"`, the resource will use the `initialValue` option instead of the value returned by the fetcher.
183
+
184
+
### `storage`
185
+
186
+
**Type**: `function`
187
+
188
+
**Default**: `createSignal`
189
+
190
+
A function that returns a signal.
191
+
This can be used to create a custom storage for the resource. This is still experimental
Copy file name to clipboardExpand all lines: src/routes/reference/basic-reactivity/create-signal.mdx
+27-8Lines changed: 27 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: createSignal
3
3
---
4
4
5
-
Signals are the most basic reactive primitive.
5
+
Signals are the most basic reactive primitive.
6
6
They track a single value (which can be a value of any type) that changes over time.
7
7
8
8
```tsx
@@ -38,8 +38,8 @@ Calling the getter (e.g., `count()` or `ready()`) returns the current value of t
38
38
39
39
Crucial to automatic dependency tracking, calling the getter within a tracking scope causes the calling function to depend on this Signal, so that function will rerun if the Signal gets updated.
40
40
41
-
Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below).
42
-
The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument.
41
+
Calling the setter (e.g., `setCount(nextCount)` or `setReady(nextReady)`) sets the Signal's value and updates the Signal (triggering dependents to rerun) if the value actually changed (see details below).
42
+
The setter takes either the new value for the signal or a function that maps the previous value of the signal to a new value as its only argument.
43
43
The updated value is also returned by the setter. As an example:
|`equals`|`false \| ((prev: T, next: T) => boolean)`|`===`| A function that determines whether the Signal's value has changed. If the function returns true, the Signal's value will not be updated and dependents will not rerun. If the function returns false, the Signal's value will be updated and dependents will rerun. |
87
-
|`name`|`string`|| A name for the Signal. This is useful for debugging. |
88
-
|`internal`|`boolean`|`false`| If true, the Signal will not be accessible in the devtools. |
0 commit comments