Derived values

Most of the values on a screen are calculated from others. In Solid, a calculation is a plain function that reads signals:

const total = () => quantity() * price;

Calling total() in JSX reads quantity(), so that spot updates whenever the quantity changes. Nothing has to keep total in sync, because it is never stored: it is worked out each time it's read.

Reach for a derived function before a second signal. Two signals that must agree will sooner or later disagree.

Try it: add a total function and show it instead of the fixed $12. Then add a freeShipping function that is true once the total reaches $50, and show "Free shipping!" when it is.