Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 103 additions & 19 deletions src/routes/reference/secondary-primitives/create-computed.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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<T>(fn: (v: T) => T, value?: T): void
## Type

```ts
function createComputed<Next>(
fn: EffectFunction<undefined | NoInfer<Next>, Next>
): void;
function createComputed<Next, Init = Next>(
fn: EffectFunction<Init | Next, Next>,
value: Init,
options?: { name?: string }
): void;
function createComputed<Next, Init>(
fn: EffectFunction<Init | Next, Next>,
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<undefined | NoInfer<Next>, Next> | EffectFunction<Init | Next, Next>`
- **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<User>({
name: "",
});

// Update the store synchronously when props change.
// This prevents a second render cycle.
createComputed(() => {
setFormData("name", props.user.name);
});

return (
<form>
<h1>Editing: {formData.name}</h1>
<input
value={formData.name}
onInput={(e) => setFormData("name", e.currentTarget.value)}
/>
</form>
);
}
```

## 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)