Function useComputed

useComputed<T>(compute: () => T, deps: DependencyList): ReadonlyReactive<T>

Creates a new computed signal that evaluates the given compute function.

The hook returns the same signal for as long as deps remains the same. When deps change, a new signal will be created.

Type Parameters

Parameters

compute: () => T
deps: DependencyList

Returns ReadonlyReactive<T>

Example

Defining a simple computed value in your react component:

function MyComponent(props) {
    // Creates a computed value based on the given function.
    // The computed value will be re-created whenever one of the listed dependencies changes.
    // While the computed value can track all its _reactive_ dependencies automatically (`.value` reads etc.)
    // the reactive value itself used here might change (different props) - this cannot be detected automatically.
    const computed = useComputed(() => props.someReactive.value * 2, [props.someReactive]);

    // Watches on `computed` and returns its current value.
    const currentValue = useReactiveValue(computed);
}

If the body of your compute function depends on non-reactive values (such as react props or state), list those values in the deps array.

See

()
()