diff --git a/src/routes/reference/secondary-primitives/create-computed.mdx b/src/routes/reference/secondary-primitives/create-computed.mdx index 90b602693..84da443c4 100644 --- a/src/routes/reference/secondary-primitives/create-computed.mdx +++ b/src/routes/reference/secondary-primitives/create-computed.mdx @@ -9,36 +9,120 @@ tags: - primitives - effects - tracking -version: '1.0' +version: "1.0" description: >- Create immediate reactive computations with createComputed. Build custom primitives and handle side effects that respond to dependencies. --- +The `createComputed` function creates a reactive computation that runs _before_ the rendering phase. +It is primarily used to synchronize state before rendering begins. + +## Import + ```ts -import { createComputed } from "solid-js" +import { createComputed } from "solid-js"; +``` -function createComputed(fn: (v: T) => T, value?: T): void +## Type +```ts +function createComputed( + fn: EffectFunction, Next> +): void; +function createComputed( + fn: EffectFunction, + value: Init, + options?: { name?: string } +): void; +function createComputed( + fn: EffectFunction, + value?: Init, + options?: { name?: string } +): void; ``` -`createComputed` creates a new computation that immediately runs the given function in a tracking scope, thus automatically tracking its dependencies, and automatically reruns the function whenever the dependencies changes. -The function gets called with an argument equal to the value returned from the function's last execution, or on the first call, equal to the optional second argument to `createComputed`. -Note that the return value of the function is not otherwise exposed; in particular, createComputed has no return value. +## Parameters + +### `fn` + +- **Type:** `EffectFunction, Next> | EffectFunction` +- **Required:** Yes + +The function that performs the computation. +It executes immediately to track dependencies and re-runs whenever a dependency changes. + +It receives the value returned from the previous execution as its argument. +On the initial execution, it receives the [`value`](#value) parameter (if provided) or `undefined`. + +### `value` + +- **Type:** `Init` +- **Required:** No + +The initial value passed to `fn` on its first execution. + +### `options` + +- **Type:** `{ name?: string }` +- **Required:** No + +An optional configuration object with the following properties: -`createComputed` is the most immediate form of reactivity in Solid, and is most useful for building other reactive primitives. -For example, some other Solid primitives are built from `createComputed`. -However, it should be used with care, as `createComputed` can easily cause more unnecessary updates than other reactive primitives. -Before using it, consider the closely related primitives [`createMemo`](/reference/basic-reactivity/create-memo) and [`createRenderEffect`](/reference/secondary-primitives/create-render-effect). +#### `name` -Like `createMemo`, `createComputed` calls its function immediately on updates (unless you're in a [batch](/reference/reactive-utilities/batch), [effect](/reference/basic-reactivity/create-effect), or [transition](/reference/reactive-utilities/use-transition)). -However, while `createMemo` functions should be pure (not set any signals), `createComputed` functions can set signals. -Related, `createMemo` offers a readonly signal for the return value of the function, whereas to do the same with `createComputed` you would need to set a signal within the function. -If it is possible to use pure functions and `createMemo`, this is likely more efficient, as Solid optimizes the execution order of memo updates, whereas updating a signal within `createComputed` will immediately trigger reactive updates some of which may turn out to be unnecessary. +- **Type:** `string` +- **Required:** No + +A debug name for the computation. +It is used for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). + +## Return value + +- **Type:** `void` + +`createComputed` does not return a value. + +## Examples + +### Basic usage + +```tsx +import { createComputed } from "solid-js"; +import { createStore } from "solid-js/store"; + +type User = { + name?: string; +}; + +type UserEditorProps = { + user: User; +}; + +function UserEditor(props: UserEditorProps) { + const [formData, setFormData] = createStore({ + name: "", + }); + + // Update the store synchronously when props change. + // This prevents a second render cycle. + createComputed(() => { + setFormData("name", props.user.name); + }); + + return ( +
+

Editing: {formData.name}

+ setFormData("name", e.currentTarget.value)} + /> +
+ ); +} +``` -## Arguments +## Related -| Name | Type | Description | -| :------ | :------------ | :----------------------------------------- | -| `fn` | `(v: T) => T` | The function to run in a tracking scope. | -| `value` | `T` | The initial value to pass to the function. | +- [`createMemo`](/reference/basic-reactivity/create-memo) +- [`createRenderEffect`](/reference/secondary-primitives/create-render-effect)