Solid's control-flow components — the ones you reach for in any
component tree — all work inside <Canvas> exactly the way they work
inside a <div>. You don't learn a new vocabulary; you keep using
<Show>, <Switch>, <For>, <Index>, <Suspense>.
<Show>
The conditional. Mount and unmount children based on a signal.
When the signal flips, <Show> mounts and unmounts its children —
not just hides them. The cube's BoxGeometry and MeshNormalMaterial
are constructed when it appears and disposed when it disappears (more
on disposal later).
<Switch> / <Match>
The branching cousin. For more than two possible states, pick the first
matching <Match>.
Cycle through idle, loading, ready. Each state's scene is a
different mesh entirely — when you click the button, the previous
mesh's geometry and material are disposed and the next one mounts.
<For>
The keyed list. Each item is tracked by identity — reordering an array doesn't remount anything, push/pop is cheap.
Click "add" to push a new cube onto the signal array; the scene gains a
cube. Click "remove" to pop one; it disappears. The other cubes don't
move on the JSX level — they just update their position because the
expression (index() - (cubes().length - 1) / 2) * 1.2 reads two
reactive values. One assignment per moved cube, per change. No diffing,
no remount.
<Index>
<For>'s positional cousin. Where <For> tracks items by identity,
<Index> tracks positions — the item at slot 0 is always the same
component, even if the value changes. Good for fixed-shape lists like
a row of slots.
Click "shuffle". The colours change, but each cube stays mounted —
only its color prop updates. With <For> you'd see the cubes
re-mount whenever the array's identity changed.
<Suspense>
Wait for a createResource to resolve, falling back to something else
in the meantime. Both the fallback and the resolved content can be
<T.*>.
Click "new colour". The cube's colour comes from a createResource
that takes ~800ms to resolve. While it's pending, <Suspense> shows
the grey torus fallback. When it resolves, the cube mounts with the new
colour.
What about clicking the cube itself?
So far the triggers have been DOM buttons. But what if you wanted to
click the cube — the actual <T.Mesh> — and have that be the
trigger? Same onClick, different target. That's the next chapter.
Last updated: 6/8/26, 11:20 AM