How updates happen

A component redraws when a value it read changes.

What counts as a read

Every value read while producing the markup counts, including reads inside the functions the component calls:

src/status.ts2

const poisoned = (): Boolean => useServerState(Varps.POISON) > 0;

A component that calls poisoned() redraws when poison changes. Reads inside a handler give you the value at the moment the handler runs.

Keeping part of a panel still

Put a fast-changing value in a small component of its own, so only that component redraws:

src/state-split.ts2

const Countdown = (): Component => {
  const [left, setLeft] = useState(60);
  …
export const BoostCard = (): Component => (
  <SunkenBox>
    <text x={6} y={4} w={120} h={14} text="Strength boost" font={Fonts.PLAIN} color={Colors.AMBER} />
    <layer x={6} y={22} w={60} h={16}><Countdown /></layer>

Starting a list afresh

rebuildOn={key} builds everything conditional below the element again whenever key changes. Use it when the server sends a new list and the old rows should not be reused:

src/updates.ts2

<layer w="fill" h="fill" rebuildOn={n}>

Running something after a render

onMounted runs after a component’s first render, and onUpdated after every render after that:

src/reference-lifecycle.ts2

onMounted(() => { log.scrollY = log.scrollHeight; });
// ...and stay on it as more arrive.
onUpdated(() => { log.scrollY = log.scrollHeight; });

The reference has onMounted and onUpdated.