Skip to main content

Methods

❗️info

Here are valuable methods of the Computed Class listed, which aren't directly related to the State Class.

The Computed is an extension of the State Class and offers the same methods as a normal State (Light State). These State related methods aren't described in this Section. To find out more about specific State methods, check out the State documentation.

recompute()

Recomputes the value of the Computed Class.

const MY_COMPUTED = createComputed(() => {
console.log('Called Recompute');
return 'jeff';
});
MY_COMPUTED.recompute(); // console: Called Recompute

To do this, it internally calls the computeFunction() and detects its dependencies anew.

📭 Props

PropTypeDefaultDescriptionRequired
configRecomputeConfigInterface{}ConfigurationNo

📄 Return

Computed

Returns the Computed it was called on.




updateComputeFunction()

Updates the computeFunction() of the Computed Class.

const MY_COMPUTED = createComputed(() => {
return `I am '${MY_NAME.value}'`;
});
MY_COMPUTED.value; // Returns "I am 'jeff'"
MY_COMPUTED.updateComputeFunction(() => {
return `Hello there, I am '${MY_NAME.value}'`;
});
MY_COMPUTED.value; // Returns "Hello there, I am 'jeff'"

In addition, it automatically detects the newly used dependencies and recomputes the value of the Computed Class based on the new computeFunction(). In order not to rely 100% on the automatic detection of dependencies, we can pass an optional array of hard coded dependencies as the second parameter.

const MY_COMPUTED = createComputed(() => {
return `I am '${MY_NAME.value}'`;
}, [/* hard coded deps */]);

📭 Props

PropTypeDefaultDescriptionRequired
computeFunction() => ComputedValueTypeundefinedNew function for computing the valueYes
depsArray<State | Collection | Observer>[]New hard coded dependencies of the Computed ClassYes
configUpdateComputeFunctionConfig{}ConfigurationNo

📄 Return

Computed

Returns the Computed it was called on.




compute()

Computes the value of the Computed Class using the computeFunction().

MY_COMPUTED.computeFunction = () => `My name is '${MY_NAME.value}'`;
MY_COMPUTED.compute(); // Returns "My name is 'jeff'"
MY_COMPUTED.deps; // Returns '[Observer(MY_NAME)]'

Besides computing the value, it takes care of the automatic detection of dependencies used in the computeFunction(). We can disable this autodetection by setting autodetect to false in the configuration object.

MY_COMPUTED.computeFunction = () => `My name is '${MY_NAME.value}'`;
MY_COMPUTED.compute({autodetect: false}); // Returns "My name is 'jeff'"
MY_COMPUTED.deps; // Returns '[]'

📭 Props

PropTypeDefaultDescriptionRequired
configUpdateComputeFunctionConfig{}ConfigurationNo

📄 Return

ComputedValueType