Skip to content

Commit 077cfcd

Browse files
committed
update createResource page, revert changes in createComputed, and update createSignal page.
1 parent 9e634cb commit 077cfcd

3 files changed

Lines changed: 111 additions & 224 deletions

File tree

src/routes/reference/basic-reactivity/create-resource.mdx

Lines changed: 24 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,15 @@ description: >-
1818
---
1919

2020
Creates a reactive resource that manages asynchronous data fetching and loading states, automatically tracking dependencies and providing a simple interface for reading, refreshing, and error handling.
21+
It integrates with Solid's reactivity system and Suspense boundaries.
2122

2223
## Import
2324

2425
```typescript
2526
import { createResource } from "solid-js";
2627
```
2728

28-
## Type Signature
29+
## Type
2930

3031
```typescript
3132
// Without source
@@ -42,7 +43,7 @@ function createResource<T, S, R = unknown>(
4243
): ResourceReturn<T, R>
4344
```
4445

45-
### Related Types
46+
### Related types
4647

4748
```typescript
4849
type ResourceReturn<T, R = unknown> = [Resource<T>, ResourceActions<T, R>]
@@ -97,40 +98,41 @@ Function that receives the source value (or `true` if no source), the current re
9798

9899
Configuration options for the resource.
99100

100-
## Options
101-
102-
### `initialValue`
101+
#### `initialValue`
103102
- **Type:** `T`
104103
- **Default:** `undefined`
105104

106105
Initial value for the resource.
107106
When provided, the resource starts in "ready" state and the type excludes `undefined`.
108107

109-
### `name`
108+
#### `name`
110109
- **Type:** `string`
111110
- **Default:** `undefined`
112111

113112
A name for debugging purposes in development mode.
114113

115-
### `deferStream`
114+
#### `deferStream`
116115
- **Type:** `boolean`
117116
- **Default:** `false`
118117

119118
Controls streaming behavior during server-side rendering.
120119

121-
### `ssrLoadFrom`
120+
#### `ssrLoadFrom`
122121
- **Type:** `"initial" | "server"`
123122
- **Default:** `"server"`
124123

125124
Determines how the resource loads during SSR hydration.
126125

127-
### `storage`
126+
- "server": Uses the server-fetched value during hydration.
127+
- "initial": Re-fetches on the client after hydration.
128+
129+
#### `storage`
128130
- **Type:** `(init: T | undefined) => [Accessor<T | undefined>, Setter<T | undefined>]`
129131
- **Default:** `createSignal`
130132

131133
Custom storage function for the resource value, useful for persistence or custom state management.
132134

133-
### `onHydrated`
135+
#### `onHydrated`
134136
- **Type:** `(k: S | undefined, info: { value: T | undefined }) => void`
135137
- **Default:** `undefined`
136138

@@ -155,10 +157,19 @@ type Resource<T> = {
155157
```
156158

157159
- `state`: Current state of the resource.
160+
See table below for state descriptions.
158161
- `loading`: Indicates if the resource is currently loading.
159162
- `error`: Error information if the resource failed to load.
160163
- `latest`: The latest value of the resource.
161164

165+
| State | Description | Loading | Error | Latest |
166+
| ------ | ----------- | ------- | ----- | ------ |
167+
| `unresolved` | Initial state, not yet fetched | `false` | `undefined` | `undefined` |
168+
| `pending` | Fetching in progress | `true` | `undefined` | `undefined` |
169+
| `ready` | Successfully fetched | `false` | `undefined` | `T` |
170+
| `refreshing` | Refetching while keeping previous value | `true` | `undefined` | `T` |
171+
| `errored` | Fetching failed | `false` | `any` | `undefined` |
172+
162173

163174
### `ResourceActions`
164175

@@ -170,16 +181,15 @@ type ResourceActions<T, R = unknown> = {
170181
```
171182

172183
- `mutate`: Function to Manually overwrite the resource value without calling the fetcher.
184+
Allows you to optimistically update the resource value locally, without making a network request.
173185
- `refetch`: Function to re-run the fetcher without changing the source.
174186
If a parameter is provided to `refetch`, it will be passed to the fetcher's `refetching` property.
175187

176-
## Usage
188+
## Examples
177189

178-
### Basic Usage
190+
### Basic usage
179191

180192
```typescript
181-
Basic Usage
182-
183193
const [data] = createResource(async () => {
184194
const response = await fetch('/api/data');
185195
return response.json();
@@ -254,63 +264,3 @@ const [data] = createResource(
254264
async (id) => fetchUserData(id)
255265
);
256266
```
257-
258-
## Details
259-
260-
Resources provide a reactive pattern for handling asynchronous data that integrates seamlessly with SolidJS's reactivity system and Suspense boundaries.
261-
Unlike signals, resources are specifically designed for async operations and provide built-in loading states, error handling, and refetching capabilities.
262-
263-
### State Management
264-
265-
State follows a predictable lifecycle: `"unresolved" → "pending" → "ready"/"errored"`.
266-
During refetching, the state transitions to `"refreshing"` while maintaining the previous value accessible via the latest property.
267-
This prevents UI flickering during updates.
268-
269-
In version v.1.5.0, resources gained the ability to cover a more detailed view of the Resource state, beyond `loading` and `error` states.
270-
This includes distinct states for initial loading, successful fetches, refetching, and errors:
271-
272-
| State | Description | Loading | Error | Latest |
273-
| ------ | ----------- | ------- | ----- | ------ |
274-
| `unresolved` | Initial state, not yet fetched | `false` | `undefined` | `undefined` |
275-
| `pending` | Fetching in progress | `true` | `undefined` | `undefined` |
276-
| `ready` | Successfully fetched | `false` | `undefined` | `T` |
277-
| `refreshing` | Refetching while keeping previous value | `true` | `undefined` | `T` |
278-
| `errored` | Fetching failed | `false` | `any` | `undefined` |
279-
280-
### Source Reactivity
281-
282-
Source automatically triggers refetching when the source value changes.
283-
The fetcher only runs when the source is truthy (not `null`, `undefined`, or `false`), allowing for conditional fetching patterns.
284-
Sources can be static values, reactive accessors, or computed values.
285-
286-
### Refetching Behavior
287-
288-
Refetching lets you manually trigger the fetcher using the `refetch` action, optionally passing extra parameters for more control over the request.
289-
The `mutate` action allows you to optimistically update the resource value locally, without making a network request.
290-
291-
### Suspense Integration
292-
293-
Resources automatically suspend the nearest `<Suspense>` boundary while loading, allowing you to declaratively show fallback UI until data is ready.
294-
When a resource is pending or refreshing, components reading its value will suspend, and the fallback of the closest Suspense boundary will be displayed.
295-
If an error is thrown, the nearest `<ErrorBoundary>` will catch it.
296-
297-
### SSR and Hydration
298-
299-
Solid's resources are designed for seamless server-side rendering (SSR) and hydration.
300-
During SSR, resource data is serialized and streamed to the client, enabling fast initial page loads and smooth transitions.
301-
The `ssrLoadFrom` option lets you control how the resource behaves after hydration:
302-
303-
- `"server"` (default): The client uses the value fetched on the server during hydration, providing immediate access to data without additional fetches.
304-
- `"initial"`: The client re-fetches the data after hydration, allowing for dynamic updates but potentially leading to a loading state on the client.
305-
306-
### Error Handling
307-
308-
- Resources provide built-in error handling capabilities, allowing you to easily manage errors that occur during data fetching.
309-
- Accessing the resource value when in error state re-throws the error, triggering error boundaries. The `ErrorBoundary` component can be used to catch errors and display fallback UI.
310-
311-
### Performance Characteristics
312-
313-
Performance is enhanced by automatically deduplicating concurrent fetches and leveraging Solid's fine-grained reactivity and batching mechanisms.
314-
During server-side rendering, resources can stream data for faster initial loads and improved user experience.
315-
316-

src/routes/reference/basic-reactivity/create-signal.mdx

Lines changed: 10 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ description: >-
1616
---
1717

1818
Creates a reactive state primitive consisting of a getter (accessor) and a setter function that forms the foundation of Solid's reactivity system.
19+
Signals are optimized for frequent reads and infrequent writes
1920

2021
## Import
2122

@@ -66,21 +67,27 @@ The initial value for the signal. If no initial value is provided, the signal's
6667
- **Default:** `undefined`
6768

6869
Configuration object for the signal.
70+
In production mode, all debugging metadata is stripped away for optimal performance.
71+
Dev-only options like `name` are ignored, and no warnings are issued, ensuring that your application runs as efficiently as possible.
6972

7073
#### `name`
7174

7275
- **Type:** `string`
7376
- **Default:** `undefined`
7477

7578
A name for the signal used for debugging purposes in development mode.
79+
The name will show up in console messages and in the [Solid devtools](https://github.com/thetarnav/solid-devtools).
7680

7781
#### `equals`
7882

7983
- **Type:** `false | ((prev: T, next: T) => boolean)`
8084
- **Default:** `false`
8185

86+
By default, signals use reference equality (`===`).
8287
A custom comparison function to determine when the signal should update.
83-
If set to `false`, the signal will always update regardless of value equality. By default, signals use reference equality (`===`).
88+
If set to `false`, the signal will always update regardless of value equality.
89+
This can be useful to create a Signal that triggers manual updates in the reactive system, but must remain a pure function.
90+
8491

8592
#### `internal`
8693

@@ -101,7 +108,7 @@ Returns a tuple `[getter, setter]` where:
101108

102109
## Examples
103110

104-
### Basic Usage
111+
### Basic usage
105112

106113
```tsx
107114
import { createSignal } from "solid-js";
@@ -117,76 +124,4 @@ function Counter() {
117124
);
118125
}
119126

120-
```
121-
122-
## How It Works
123-
124-
Signals are the foundational primitive of SolidJS's fine-grained reactivity system.
125-
When you call the accessor function within a reactive context (like inside [`createEffect`](/reference/basic-reactivity/create-effect) or a component's JSX), it automatically establishes a dependency relationship.
126-
Any subsequent calls to the setter will trigger updates only to the specific computations that depend on that signal.
127-
128-
```typescript
129-
const [name, setName] = createSignal("John");
130-
131-
// This effect will re-run whenever name changes
132-
createEffect(() => {
133-
console.log(`Hello, ${name()}!`);
134-
});
135-
136-
setName("Jane"); // Logs: "Hello, Jane!"
137-
```
138-
139-
## Details
140-
141-
### Reactivity System Integration
142-
143-
- **Effects**: Automatically track signal reads and re-run when values change
144-
- **Memos**: Cache computed values based on signal dependencies
145-
- **Resources**: Use signals internally for state management
146-
- **Stores**: Built on top of signals with additional mutation tracking
147-
148-
### Equality Checking
149-
150-
By default, signals use strict equality (`===`) to determine if a value has changed.
151-
This means primitive values are compared by value, while objects and arrays are compared by reference.
152-
Setting a signal to the same reference will not trigger updates, but setting it to a new object or array, even if it has identical properties, will trigger updates.
153-
154-
### Function Values
155-
156-
When your signal stores a function as its value, updating it requires special care because the setter treats functions as updater functions by default.
157-
To set a function as the actual value, wrap it in another function:
158-
159-
```typescript
160-
const [fn, setFn] = createSignal(() => "hello");
161-
162-
// ❌ This treats your function as an updater, not the new value
163-
setFn(() => "world"); // Signal becomes "world"
164-
165-
// ✅ Wrap your function to store it as the actual value
166-
setFn(() => () => "world"); // Signal becomes () => "world" (function)
167-
```
168-
169-
The pattern is: `setSignal(() => yourNewFunction)`.
170-
The outer function is the updater, the inner function is your actual value.
171-
172-
### Development vs Production
173-
174-
In development mode, signals track additional metadata to aid debugging.
175-
The `name` option allows you to assign meaningful names to signals, making them easier to identify in developer tools.
176-
Additionally, Solid issues warnings if signals are created outside of reactive contexts, helping you catch potential issues early.
177-
178-
In production mode, all debugging metadata is stripped away for optimal performance.
179-
Dev-only options like `name` are ignored, and no warnings are issued, ensuring that your application runs as efficiently as possible.
180-
181-
### Error Handling
182-
183-
- If an equality function throws an error, it's caught and handled by Solid's error boundary system
184-
- Setter functions are synchronous and will throw immediately if errors occur
185-
- Reading a signal outside of a reactive context is safe but won't establish tracking
186-
187-
### Performance Characteristics
188-
189-
- Signals are optimized for frequent reads and infrequent writes
190-
- The equality function is called on every setter invocation
191-
- Custom equality functions should be fast and pure
192-
- Avoid creating signals inside frequently-called functions
127+
```

0 commit comments

Comments
 (0)