Derived / Computed state

In the following example we map every count value to it’s double and triple and show that in the view. Notice that triple is wrapped in a Promise. Xania’s runtime will automatically recognise this and await the result before showing the end value in the view. This is useful, as we will see in the next section, when we want to asynchronuously load data from an API

function Component() {
  const count = state(1)
  const double = count.map(x => x * 2);
  const triple = count.map(x => Promise.resolve(x * 3));
  return (
    <button click={update(count, x => x + 1)}>
      Double: { double }
      Triple: { triple }
    </button>
  )
}