State values

Next example will shows an example of dynamic view that depends on state that change over time. the changes are initiated via the click event.

function Counter() {
  // 1 state
  const count = state(1);
  // 2 update
  const increment = count.update((x) => x + 1)
  // 3 view
  return (
    <button click={increment}>
      Count: { count }
    </button>
  );
}

const count = state(1);

First we create a state with initial value of 1. Naming is hard, count is not exactly a state object in the traditional sense, we cannot just peek into it to see the latest value after incrementing the count a couple of times. The actual value is stored and maintained in the xania runtime. the only way to access it’s value is using update commands / messages

const increment = update(count, (x) => x + 1)

button Element binds the click event to the increment update command. Technically, increment is just a plain data object that describes how count change over time, it is also a special type of object which Xania accepts, instead of a callback function like we saw before in Hello World example.

When triggered, Xania runtime will execute the increment to update the runtime state of the count and update the text content of the button accordingly.