Advanced

Effects

An effect() runs a function immediately and re-runs it whenever a signal it reads changes. Use it for side effects — logging, syncing state, or touching non-reactive APIs.

# Basic effect

effect(() => {
  console.log("count is", count.value);
});

This runs once right away, then again every time count changes.

# Your task

Add an effect that records a message every time count changes, and display that message in the template.

  1. Create a signal log (a string).
  2. Add an effect that sets log.value to "count changed to " + count.value.
  3. Display log.value in a <p> below the count.
⚠ Warning

Effects that read and write the same signal create an infinite loop. The solution writes to log (a different signal) while reading count, which is safe.

Need a hint?
Create a signal `log` and an effect that sets log.value = "count changed to " + count.value. Then display log.value in the template.