Computed

Derive a read-only value from state with computed(), and read it like a variable.

Last page, count++ changed one piece of text. Now you want text that shows count times something else.

You can keep a second state() in sync by hand. Don’t. Two copies drift apart.

A computed() is a value built from other values. You write the recipe once. When an input changes, Markless updates the result and the text that shows it.

Click Change count. Then click Change step.

What updates when one input changes?

Press Change count. Then press Change step. Watch total follow both.

The pageTry it

Counter

1 × 2 = 2

Your code: Counter.tsrx

import { computed, state } from '@markless/core'; export default function Counter() @{  let count = state(1);  let step = state(2);  const total = computed(() => count * step); (recipe)   <p>{count} × {step} = {total}</p>  <button onClick={() => count++}>Change count</button>  <button onClick={() => step++}>Change step</button>}

What Markless did

Times the component ran1Changes never run it again

Times the recipe ran again0Once for each input change

ranRan your component once, to set up the page.

Simplified. Yellow marks the only texts that changed. The list keeps the last four changes.

Notice that either input runs the recipe again. Only the changed input and total update on the page.

import { computed, state } from '@markless/core';

export default function Counter() @{
	let count = state(1);
	let step = state(2);
	const total = computed(() => count * step);

	<button onClick={() => count++}>{count} × {step} = {total}</button>
}

You never list the inputs. The compiler reads the recipe and finds count and step. You read total like a variable, with no call.

Use computed() for values. Put side work, like a save or a log line, in the handler that causes it.

Coming from another framework?

There is no dependency array and no effect hook. The compiler finds each input at build time. Derive values with computed(), do side work in event handlers, and do element setup in attach.

Next: What if two components need the same count? Shared state →