Reactivity

Template Reactivity

For more information on the underlying reactivity system, see Reactivity.

Template expressions automatically track reactive dependencies and update when values change.

<p>User: {userName}</p>
<p>Last seen: {getTimestamp}</p>

When userName changes, only the first expression updates. The timestamp stays the same because getTimestamp is not reactive.

Rerender Blocks

Use rerender blocks to force complete re-evaluation of template sections, including non-reactive content.

{#rerender userId}
  <p>User: {userName}</p>
  <p>Timestamp: {getTimestamp}</p>
{/rerender}

When userId changes, the entire block re-evaluates. Both the user name and timestamp update.

When to use Force re-evaluation of non-reactive content like timestamps or cached calculations that should update when related data changes.

Guard Blocks

Use guard blocks to optimize performance by only re-rendering when a computed value actually changes.

{#guard getUserStatus}
  <div class="status-{getUserStatus}">
    <p>Status: {getUserStatus}</p>
    <p>Timestamp: {getTimestamp}</p>
  </div>
{/guard}

Content only updates when getUserStatus returns a different value, not on every reactive change.

When to use Expensive computations or complex templates where you want to prevent unnecessary re-renders when the computed result hasn’t actually changed.

Example

The following example demonstrates the difference between regular expressions, rerender blocks, and guard blocks.