State

The state object

The state object is a key-value store that holds the current state of all reactive variables in the application. Each key in the state object corresponds to the name of a reactive variable used in HTML, and the associated value is the current value of that variable.

Define a new state variable

const meaningOfLife = variable("meaningOfLife", 41);

Using the state variable

<div>The answer is: {{ meaningOfLife + 1 }}</div>

Update state variable

meaningOfLife.set(42);
// Or
meaningOfLife.value = 42;

When the state variable is updated the UI is re-rendered, and any expressions referencing that variable are re-evaluated with the new value. Check out Variable for more about getters and setters.

The state object additionally holds details about all the dependents of variables. This functionality enables Cog to identify which elements require updating when there are changes in the state.