diff --git a/src/demo/auto-counter.ts b/src/demo/auto-counter.ts
index b124bcf..ed8528f 100644
--- a/src/demo/auto-counter.ts
+++ b/src/demo/auto-counter.ts
@@ -1,18 +1,23 @@
 import { component } from 'hydroactive';
+import { cached, signal } from 'hydroactive/signals.js';
 
 /** Automatically increments the count over time. */
 export const AutoCounter = component('auto-counter', (comp) => {
   const label = comp.host.query('span')!;
-  let count = Number(label.text);
+  const countStr = signal(label.text);
+  const count = cached(() => Number(countStr()));
 
   comp.connected(() => {
     const id = setInterval(() => {
-      count++;
-      label.native.textContent = count.toString();
+      countStr.set((count() + 1).toString());
     }, 1_000);
 
     return () => {
       clearInterval(id);
     };
   });
+
+  comp.effect(() => {
+    label.native.textContent = count().toString();
+  });
 });