Skip to content

Commit e0f4812

Browse files
committed
update docs for accuracy
1 parent 9ee6e50 commit e0f4812

5 files changed

Lines changed: 30 additions & 64 deletions

File tree

src/routes/reference/component-apis/children.mdx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,11 @@ import { children } from "solid-js";
2424
## Type
2525

2626
```ts
27-
function children(fn: Accessor<JSX.Element>): Accessor<JSX.Element> & {
28-
toArray: () => JSX.Element[];
27+
type ResolvedJSXElement = Exclude<JSX.Element, JSX.ArrayElement>;
28+
type ResolvedChildren = ResolvedJSXElement | ResolvedJSXElement[];
29+
30+
function children(fn: Accessor<JSX.Element>): Accessor<ResolvedChildren> & {
31+
toArray: () => ResolvedJSXElement[];
2932
};
3033
```
3134

@@ -40,15 +43,15 @@ Accessor that returns the component's `children` value.
4043

4144
## Return value
4245

43-
- **Type:** `Accessor<JSX.Element> & { toArray: () => JSX.Element[] }`
46+
- **Type:** `Accessor<ResolvedChildren> & { toArray: () => ResolvedJSXElement[] }`
4447

4548
Returns an accessor for the resolved children.
4649
The accessor also exposes `toArray()`.
4750

4851
## Behavior
4952

5053
- The returned accessor memoizes the resolved children, so repeated reads use the resolved result instead of recreating the child structure.
51-
- `children` resolves functions, arrays, fragments, and nested child structures from `props.children`.
54+
- `children` resolves nested arrays, fragments, and zero-argument child accessors from `props.children`.
5255
- `toArray()` returns the resolved children as an array. It returns `[]` when the resolved value is `null` or `undefined`.
5356

5457
## Examples

src/routes/reference/lifecycle/on-cleanup.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ Returns `fn` unchanged.
5151
- In a component, the cleanup runs when that component is unmounted.
5252
- In a tracking scope such as [`createEffect`](/reference/basic-reactivity/create-effect), [`createMemo`](/reference/basic-reactivity/create-memo), or [`createRoot`](/reference/reactive-utilities/create-root), the cleanup runs when that scope is disposed or re-executes.
5353
- Multiple cleanup functions run when the owning scope is cleaned up.
54+
- Calling `onCleanup` outside a reactive owner does not register a cleanup. In development, Solid warns that the cleanup will never run.
5455
- On the server, cleanup also runs when server-side owners or reactive branches are disposed.
5556

5657
## Examples

src/routes/reference/lifecycle/on-mount.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ Non-tracking function executed once on mount.
4949
- `fn` does not track reactive dependencies.
5050
- Internally, `onMount(fn)` is equivalent to `createEffect(() => untrack(fn))`.
5151
- By the time `onMount` runs, refs have already been assigned.
52+
- Returning a function from `fn` does not register cleanup. Use [`onCleanup`](/reference/lifecycle/on-cleanup) inside `onMount` when cleanup is needed.
5253

5354
## Examples
5455

src/routes/reference/secondary-primitives/create-deferred.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ Returns an accessor that exposes the deferred value.
7878
- The deferred accessor initially reflects the current source value.
7979
- Later updates are deferred through Solid's scheduler until later execution or until `timeoutMs` is reached, so the returned accessor can lag behind the source accessor.
8080
- `equals` controls whether downstream dependents are notified for a new value.
81+
- `createDeferred` defers propagation of the accessor value. It does not debounce writes to the source accessor.
8182
- On the server, `createDeferred` returns the source accessor unchanged.
8283

8384
## Examples

src/routes/reference/secondary-primitives/create-render-effect.mdx

Lines changed: 20 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,11 @@ tags:
1212
- lifecycle
1313
version: "1.0"
1414
description: >-
15-
Execute effects immediately during rendering with createRenderEffect. Run side
16-
effects as DOM creates, before refs are set or connected.
15+
Create a reactive computation that runs immediately during the render phase.
1716
---
1817

19-
The `createRenderEffect` primitive creates a reactive computation that automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function.
20-
This function re-runs whenever any of its dependencies change.
18+
`createRenderEffect` creates a reactive computation that runs during the render phase as DOM is created and updated.
19+
It tracks reactive reads inside the provided function and re-runs whenever those dependencies change.
2120

2221
## Execution Timing
2322

@@ -30,15 +29,12 @@ This function re-runs whenever any of its dependencies change.
3029
### Subsequent Runs
3130

3231
- 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.
3432
- 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**.
3633

3734
### Server-Side Rendering
3835

3936
- 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.
37+
- On the client, an initial run still occurs during the client rendering phase.
4238
- After hydration, subsequent runs occur on the client when dependencies change.
4339

4440
## Import
@@ -69,7 +65,7 @@ function createRenderEffect<Next, Init>(
6965

7066
### `fn`
7167

72-
- **Type:** `EffectFunction<undefined | NoInfer<Next> | EffectFunction<Init | Next, Next>`
68+
- **Type:** `EffectFunction<undefined | NoInfer<Next>, Next> | EffectFunction<Init | Next, Next>`
7369
- **Required:** Yes
7470

7571
A function to be executed as the render effect.
@@ -102,69 +98,33 @@ A name for the render effect, which can be useful for identification in debuggin
10298

10399
`createRenderEffect` does not return a value.
104100

105-
## Examples
106-
107-
### Basic Usage
108-
109-
```tsx
110-
import { createSignal, createRenderEffect } from "solid-js";
101+
## Behavior
111102

112-
function Counter() {
113-
const [count, setCount] = createSignal(0);
103+
- `createRenderEffect` runs immediately when it is created.
104+
- Its initial run happens during the render phase, before mounted DOM is connected and before refs are assigned.
105+
- Later runs happen when tracked dependencies change.
106+
- Most application code should use [`createEffect`](/reference/basic-reactivity/create-effect). `createRenderEffect` is mainly for render-phase work where that timing is required.
114107

115-
// This runs immediately during render, and re-runs when the count changes.
116-
createRenderEffect(() => {
117-
console.log("Count: ", count());
118-
});
119-
120-
return (
121-
<div>
122-
<p>Count: {count()}</p>
123-
<button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
124-
</div>
125-
);
126-
}
127-
```
108+
## Examples
128109

129-
### Execution Timing
110+
### Ref timing
130111

131112
```tsx
132-
import { createSignal, createEffect, createRenderEffect } from "solid-js";
133-
134-
function Counter() {
135-
const [count, setCount] = createSignal(0);
136-
137-
// This is part of the component's synchronous execution.
138-
console.log("Hello from counter");
113+
import { createRenderEffect, onMount } from "solid-js";
139114

140-
// This effect is scheduled to run after the initial render is complete.
141-
createEffect(() => {
142-
console.log("Effect:", count());
143-
});
115+
function Example() {
116+
let element: HTMLDivElement | undefined;
144117

145-
// By contrast, a render effect runs synchronously during the render phase.
146118
createRenderEffect(() => {
147-
console.log("Render effect:", count());
119+
console.log("render effect", element); // undefined on the initial run
148120
});
149121

150-
// Setting a signal during the render phase re-runs render effects, but not effects, which are
151-
// still scheduled.
152-
setCount(1);
153-
154-
// A microtask is scheduled to run after the current synchronous code (the render phase) finishes.
155-
queueMicrotask(() => {
156-
// Now that rendering is complete, signal updates will trigger effects immediately.
157-
setCount(2);
122+
onMount(() => {
123+
console.log("mounted", element); // <div>
158124
});
159-
}
160125

161-
// Output:
162-
// Hello from counter
163-
// Render effect: 0
164-
// Render effect: 1
165-
// Effect: 1
166-
// Render effect: 2
167-
// Effect: 2
126+
return <div ref={element}>Hello</div>;
127+
}
168128
```
169129

170130
## Related

0 commit comments

Comments
 (0)