Reactivity

Components run once when they mount. Read signals in JSX to update only the text or properties that depend on them.

#Reactive state

A read during setup is a snapshot. Call the signal in JSX when the value should stay live.

const [count, setCount] = createSignal(0);
<Text>Count: {count()}</Text>
<Button onClick={() => setCount(count() + 1)}>Increment</Button>

#Derived state

Use createMemo for a value computed from other signals. Keep the function pure; write from events or effects.

const doubled = createMemo(() => count() * 2);
<Text>{doubled()}</Text>

#Effects and cleanup

Use createEffect for work outside the tree. Register onCleanup so subscriptions stop when the window closes or the branch is removed.

import { createEffect, onCleanup } from "solid-js";

createEffect(() => count(), value => console.log(value));
const stop = watchProject();
onCleanup(stop);

#Batched updates

Solid batches ordinary signal writes. Use flush() in tests when you need queued updates to settle before an assertion.