v0.20.230 - 8.9 / 6.4

<Show .../>

Renders its children when when is truthy. For reactivity, pass when as a function — static values short-circuit and never re-evaluate. If children is a callback, it receives a signal that carries the current truthy value, so you can keep reading fresh values without tearing down the tree.

# Attributes

nametypedescription
whenanyonce when becomes truthy, it will show its children
fallback?anya thing to render as fallback when the condition is falsy

# Snippet

# Static true/false

Test using static values

# Reactive Value

Test using a signal and also the signal value

The signal that's being called won't be reactive because instead of passing to when a function we are passing the signal value which is a boolean

# Rendering

How many times a children renders by a toggling signal

Children are unmounted and effectively disposed

# Avoiding Re-rendering

Using the children helper we can avoid re rendering

We use the children helper to memo the result of a component

# Fallback

A fallback renders a component when the condition becomes false

Fallbacks use memo which are lazy, so these don't need to use the children helper

# Fallback Signal

Tests a signal for a fallback.

# Callback

Using the value from the condition in a callback

Show callbacks receive a read-only signal, a memo

# Callbacks

Children are arrays, so the callbacks can be placed anywhere

The third callback needs to return a function for it to be reactive

# Callbacks Null

Test what happens when a value for a callback becomes null

# Show In Between

In between 2 elements and in between 2 text nodes

Sandwich, it keeps the position