diff --git a/fsm-actions.js b/fsm-actions.js
index 9b8608f..87e3531 100644
--- a/fsm-actions.js
+++ b/fsm-actions.js
@@ -1,7 +1,8 @@
 import StateMachine from './fsm.js';
 import StorageProxy from './storage.js';
 import StreamMapper from './streammapper.js';
-import { effect, html, signal } from './reactive.js';
+import debounce from './debounce.js';
+import { effect, html, signal, render } from './reactive.js';
 
 // shorter keys than crypto.randomUUID()
 const random = () => window.crypto.getRandomValues(new Uint32Array(1))[0];
@@ -20,6 +21,9 @@ const defaultState = {
 
 const DEBUG = false;
 
+// Maximum write interval
+const writeInterval = 5000;
+
 // Use a unique key for app storage
 const appKey = 'rfsm-actions';
 const clearStorage = false;
@@ -35,17 +39,14 @@ for (const k in defaultState) {
 
 // Debounced storage updater
 // TODO: should be generalized
-const updateStorage = () => { 
+const updateStorageImmediately = () => {
+  console.log('updateStorage()');
   for (let i in defaultState) {
-    const stored = storagingState[i];
-    const live = appState[i];
-    if (Object.is(live, stored) === false) {
-      storagingState[i] = appState[i].value;
-      //console.log(`Updating storage key ${i} with value`, appState[i]);
-    }
+    storagingState[i] = appState[i].value;
   }
 };
-//const updateStorageDebounced = debounce(updateStorage, 1000);
+
+const updateStorage = debounce(updateStorageImmediately, writeInterval);
 
 // Component container
 const appContainer = document.querySelector('#app');
@@ -55,37 +56,51 @@ const machineConfig = {
   initial: 'uninitialized',
   states: {
     uninitialized: ['initialized'],
-    initialized: ['viewing'],
-    viewing: ['editing'],
-    editing: ['viewing']
+    initialized: ['viewlist'],
+    viewlist: ['editing'],
+    editing: ['viewlist']
   }
 };
 
 const machine = new StateMachine(machineConfig);
 
-/*
+// Initialize signal tracking machine current state
+appState.current = signal(machine.current);
+
 machine.on('*', (prev) => {
   //console.log(`FSM.on(*): state changed from ${prev} to ${machine.current}, (${appState.current.value})`);
   console.log('FSM.on(*): ', prev, 'to', machine.current);
-  if (prev !== machine.current) {
-    console.log('FSM.on(*): changing state', prev, 'to', machine.current);
-    //appState.current.value = machine.current;
+
+  // Sync signal to state machine current state
+  appState.current.value = machine.current;
+
+  console.log('Effect: state changed to', machine.current);
+  // Don't bother writing until after initialization
+  if (!['uninitialized', 'initialized'].includes(machine.current)) {
+    console.log('effect: calling updateStorage()');
+    updateStorage();
   }
 });
-*/
 
 machine.on('initialized', async (prev) => {
-  console.log('FSM.initialized: rendering');
-  appContainer.innerHTML = html`${App(appState)}`;
-  console.log('FSM.initialized: rendering started, setting state to viewing');
-  //appState.current.value = 'viewing';
-  appState.current.value = machine.current;
+  console.log('FSM.initialized');
+
+  // Increment counter once per page load
+  appState.counter.value = appState.counter.value + 1;
+
   machine.go();
 });
 
-machine.on('viewing', (prev) => {
-  console.log('FSM.viewing');
-  appContainer.innerHTML = html`${App(appState)}`;
+machine.on('viewlist', (prev) => {
+  console.log('FSM.viewlist');
+
+  // Watch for item changes and re-render
+  // This effect runs immediately, handling the initial render
+  effect(() => {
+    const items = appState.items.value; // Subscribe to items
+    console.log('Rendering app with', items.length, 'items');
+    render(appContainer, html`${App(appState)}`);
+  });
 });
 
 // Item factory
@@ -104,10 +119,10 @@ const createItem = (text) => ({
 const actions = {
   addItem: async ({text}) => {
     if (text.trim()) {
+      console.log('addItem()');
       const newItem = createItem(text);
       appState.items.value = [...appState.items.value, newItem];
-      console.log('updateItem(): setting state to viewing');
-      //appState.current.value = 'viewing';
+      console.log('addItem(): done');
     }
   },
 
@@ -130,15 +145,13 @@ const actions = {
       }
       console.log('new items', newItems);
     }
-    console.log('updateItem(): setting state to viewing');
-    //appState.current.value = 'viewing';
+    console.log('updateItem(): done');
   },
 
   deleteItem: async ({item}) => {
     console.log('actions.deleteItem', item);
     appState.items.value = appState.items.value.filter(t => t.id != item.id);
-    console.log('deletedItem(): setting state to viewing');
-    //appState.current.value = 'viewing';
+    console.log('deletedItem()');
   }
 };
 
@@ -156,6 +169,7 @@ const emit = StreamMapper(actions, listener);
 
 const StateInfo = ({ currentState, items }) => {
   console.log('StateInfo', currentState, items);
+
   // State metadata
   const total = items.length;
 
@@ -197,14 +211,14 @@ const Card = ({ item }) => {
   };
 
   return html`
-    <div oninput=${onInput}>
+    <div data-key="${item.id}" oninput=${onInput}>
       ${Textarea({value: s.value.text})}
       ${Button({label: 'Delete', onclick: onDelete})}
     </div>
   `;
 };
 
-const Cards = ({items}) => {
+const Cards = ({ items }) => {
   const s = signal(items);
 
   return html`
@@ -216,7 +230,6 @@ const Cards = ({items}) => {
 
 const App = (state) => {
   console.log('App', state);
-  state.counter.value = state.counter.value + 1;
 
   const onClickNew = () => emit('addItem', {text: 'New item'});
 
@@ -234,7 +247,7 @@ const App = (state) => {
       ${Button({label: '+', onclick: onClickNew})}
       ${Button({label: layout.value, onclick: onClickLayout})}
       ${Button({label: sort.value, onclick: onClickSort})}
-      ${StateInfo({currentState: state.current.value, items: state.items.value})}
+      ${StateInfo({currentState: machine.current, items: state.items.value})}
       ${Cards({items: state.items.value})}
     </div>
     <footer>
@@ -254,23 +267,13 @@ if (appState.items.length == 0) {
   console.log('Initial items:', appState.items);
 }
 
-// Initialized signal and effect that syncs the signal to the state machine
-appState.current = signal(machine.current);
-
-const delay = f => setTimeout(f, DEBUG ? 2000 : 0);
-
-//
-effect(async () => {
-  // Writes
-  // TODO: debounce
-  updateStorage();
-  const next = machineConfig.states[machine.current][0];
-    console.log('Dirty flag, next state:', next);
-//}, [appState.current.value]);
-}, [appState.current.value]);
-
 // Fire up the machine
 await machine.go();
 
+window.addEventListener('beforeunload', (e) => {
+  console.log('beforeunload: flushing storage');
+  updateStorageImmediately();
+});
+
 console.log('main complete');
 
diff --git a/fsm.js b/fsm.js
index d19947e..48d5d1d 100644
--- a/fsm.js
+++ b/fsm.js
@@ -8,6 +8,7 @@
 
   function FSM(config) {
     const events = {};
+    let transitionQueue = Promise.resolve();
 
     // TODO: validate params, eg can't have dead end states, or need some exit func
     const fsm = {
@@ -31,43 +32,48 @@
     const getCbs = (key) => events[key] || [];
 
     fsm.go = function(next = null) {
-      const prev = fsm.current;
-      const params = Array.prototype.slice.call(arguments, 1);
-
-      // Default to first next state for current, so can just call `.go()`
-      // TODO: file issue
-      if (next === null) {
-        next = fsm.transitions[prev][0];
-      }
-
-      if (fsm.transitions[prev].indexOf(next) < 0)
-        return Promise.reject(new ITE(prev, next));
-
-      const after = getCbs('after:' + prev);
-      const pre = getCbs('before:' + next);
-      const on = getCbs(next);
-      const post = getCbs('*');
-
-      const beforePost = after.concat(pre, on);
-
-      const getPrefix = (index) => {
-        return (index < after.length ? [next] : index < beforePost.length ? [prev] : [prev, next]);
-      };
-
-      const stateChange = after.length + pre.length;
-
-      return beforePost
-        .concat(post, function ensureStateChange() {})
-        .reduce(function(series, task, index) {
-          const args = getPrefix(index).concat(params);
-          return series.then(function() {
-            if (index === stateChange) {
-              fsm.current = next;
-            }
-
-            return task.apply(task, args);
-          });
-        }, Promise.resolve());
+      // Queue this transition to run after any in-progress transitions
+      transitionQueue = transitionQueue.then(() => {
+        const prev = fsm.current;
+        const params = Array.prototype.slice.call(arguments, 1);
+
+        // Default to first next state for current, so can just call `.go()`
+        // TODO: file issue
+        if (next === null) {
+          next = fsm.transitions[prev][0];
+        }
+
+        if (fsm.transitions[prev].indexOf(next) < 0)
+          return Promise.reject(new ITE(prev, next));
+
+        const after = getCbs('after:' + prev);
+        const pre = getCbs('before:' + next);
+        const on = getCbs(next);
+        const post = getCbs('*');
+
+        const beforePost = after.concat(pre, on);
+
+        const getPrefix = (index) => {
+          return (index < after.length ? [next] : index < beforePost.length ? [prev] : [prev, next]);
+        };
+
+        const stateChange = after.length + pre.length;
+
+        return beforePost
+          .concat(post, function ensureStateChange() {})
+          .reduce(function(series, task, index) {
+            const args = getPrefix(index).concat(params);
+            return series.then(function() {
+              if (index === stateChange) {
+                fsm.current = next;
+              }
+
+              return task.apply(task, args);
+            });
+          }, Promise.resolve());
+      });
+
+      return transitionQueue;
     }
 
     return fsm;
diff --git a/reactive.js b/reactive.js
index bf44a91..4e1c3bc 100644
--- a/reactive.js
+++ b/reactive.js
@@ -4,57 +4,56 @@ export function signal(value) {
   const subscriptions = new Set();
   const holder = { value };
 
-  const handler = { 
+  const handler = {
     get(obj, prop) {
       //console.log('handler.get(): obj, prop', obj, prop);
       const observer = context[context.length - 1]
-      if (observer) subscriptions.add(observer);
-      return holder.value;
+      if (observer) {
+        subscriptions.add(observer);
+        // Let the effect know which subscription set it's in
+        if (observer.addSubscription) {
+          observer.addSubscription(subscriptions);
+        }
+      }
+      return holder[prop];
     },
     set(obj, prop, v) {
       //console.log('handler.set(): set obj, prop, new val', obj, prop, v);
-      holder.value = v;
+      holder[prop] = v;
       for (const observer of subscriptions) {
         observer.execute();
       }
-      return Reflect.get(holder, 'value');
+      return true;
     }
   };
 
   return new Proxy(holder, handler);
 };
 
-/*
-export function reactSignal(value) {
+export function effect(fn) {
   const subscriptions = new Set();
 
-  const read = () => {
-    const observer = context[context.length - 1]
-    if (observer) subscriptions.add(observer);
-    return value;
-  };
-
-  const write = (newValue) => {
-    value = newValue;
-    for (const observer of subscriptions) {
-      observer.execute()
-    }
-  };
-
-  return [read, write];
-};
-*/
-
-export function effect(fn) {
   const effect = {
     execute() {
       context.push(effect);
       fn();
       context.pop();
+    },
+    dispose() {
+      // Remove this effect from all signal subscriptions
+      for (const signal of subscriptions) {
+        signal.delete(effect);
+      }
+      subscriptions.clear();
+    },
+    addSubscription(signalSubs) {
+      subscriptions.add(signalSubs);
     }
   };
 
   effect.execute();
+
+  return effect.dispose;
 };
 
 // Template processor
@@ -91,3 +90,214 @@ export function html (template, ...values) {
 
   return htmlString;
 };
+
+// Cache for tracking rendered content per container
+const renderCache = new WeakMap();
+
+// Helper to create a temporary container for parsing HTML
+function parseHTML(htmlString) {
+  const template = document.createElement('template');
+  template.innerHTML = htmlString.trim();
+  return Array.from(template.content.childNodes);
+}
+
+// Helper to check if two nodes are similar enough to update rather than replace
+function isSameNodeType(node1, node2) {
+  if (!node1 || !node2) return false;
+  if (node1.nodeType !== node2.nodeType) return false;
+  if (node1.nodeType === Node.ELEMENT_NODE) {
+    return node1.tagName === node2.tagName;
+  }
+  return true;
+}
+
+// Diff and patch two DOM nodes
+function patchNode(oldNode, newNode) {
+  // Text nodes - just update content
+  if (oldNode.nodeType === Node.TEXT_NODE) {
+    if (oldNode.textContent !== newNode.textContent) {
+      oldNode.textContent = newNode.textContent;
+    }
+    return oldNode;
+  }
+
+  // Element nodes - update attributes
+  if (oldNode.nodeType === Node.ELEMENT_NODE) {
+    // Update attributes
+    const oldAttrs = oldNode.attributes;
+    const newAttrs = newNode.attributes;
+
+    // Remove old attributes
+    for (let i = oldAttrs.length - 1; i >= 0; i--) {
+      const attr = oldAttrs[i];
+      if (!newNode.hasAttribute(attr.name)) {
+        oldNode.removeAttribute(attr.name);
+      }
+    }
+
+    // Set new attributes
+    for (let i = 0; i < newAttrs.length; i++) {
+      const attr = newAttrs[i];
+      if (oldNode.getAttribute(attr.name) !== attr.value) {
+        oldNode.setAttribute(attr.name, attr.value);
+      }
+    }
+
+    // Recursively patch children
+    const oldChildren = Array.from(oldNode.childNodes);
+    const newChildren = Array.from(newNode.childNodes);
+
+    const maxLength = Math.max(oldChildren.length, newChildren.length);
+    for (let i = 0; i < maxLength; i++) {
+      const oldChild = oldChildren[i];
+      const newChild = newChildren[i];
+
+      if (!oldChild && newChild) {
+        // Add new child
+        oldNode.appendChild(newChild.cloneNode(true));
+      } else if (oldChild && !newChild) {
+        // Remove old child
+        oldNode.removeChild(oldChild);
+      } else if (isSameNodeType(oldChild, newChild)) {
+        // Patch existing child
+        patchNode(oldChild, newChild);
+      } else {
+        // Replace child with different type
+        oldNode.replaceChild(newChild.cloneNode(true), oldChild);
+      }
+    }
+  }
+
+  return oldNode;
+}
+
+// Helper to get the key from a node
+function getNodeKey(node) {
+  if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-key')) {
+    return node.getAttribute('data-key');
+  }
+  return null;
+}
+
+// Smart render function that reuses DOM nodes with key-based reconciliation
+export function render(container, htmlString) {
+  // Get or create cache entry for this container
+  if (!renderCache.has(container)) {
+    renderCache.set(container, {
+      html: null
+    });
+  }
+
+  const cache = renderCache.get(container);
+
+  // If the HTML is the same, don't do anything
+  if (cache.html === htmlString) {
+    console.log('render: HTML unchanged, skipping update');
+    return;
+  }
+
+  console.log('render: HTML changed, patching DOM');
+
+  // Parse the new HTML
+  const newNodes = parseHTML(htmlString);
+  const oldNodes = Array.from(container.childNodes);
+
+  // Build a map of keyed old nodes
+  const oldKeyedNodes = new Map();
+  const oldUnkeyedNodes = [];
+  oldNodes.forEach(node => {
+    const key = getNodeKey(node);
+    if (key) {
+      oldKeyedNodes.set(key, node);
+    } else {
+      oldUnkeyedNodes.push(node);
+    }
+  });
+
+  // Process new nodes
+  let oldUnkeyedIndex = 0;
+  const processedOldNodes = new Set();
+
+  newNodes.forEach((newNode, i) => {
+    const key = getNodeKey(newNode);
+    let oldNode = null;
+
+    if (key) {
+      // Try to find matching keyed node
+      oldNode = oldKeyedNodes.get(key);
+      if (oldNode) {
+        processedOldNodes.add(oldNode);
+
+        // Check if node is in the right position
+        const currentIndex = oldNodes.indexOf(oldNode);
+        if (currentIndex !== i) {
+          // Move to correct position
+          if (i < oldNodes.length) {
+            container.insertBefore(oldNode, oldNodes[i]);
+          } else {
+            container.appendChild(oldNode);
+          }
+        }
+
+        // Patch the node
+        if (isSameNodeType(oldNode, newNode)) {
+          patchNode(oldNode, newNode);
+        } else {
+          // Replace if types don't match
+          container.replaceChild(newNode, oldNode);
+          processedOldNodes.delete(oldNode);
+        }
+      } else {
+        // New keyed node - insert it
+        if (i < oldNodes.length) {
+          container.insertBefore(newNode, oldNodes[i]);
+        } else {
+          container.appendChild(newNode);
+        }
+      }
+    } else {
+      // Unkeyed node - match by position with unkeyed old nodes
+      while (oldUnkeyedIndex < oldUnkeyedNodes.length) {
+        const candidate = oldUnkeyedNodes[oldUnkeyedIndex];
+        if (!processedOldNodes.has(candidate)) {
+          oldNode = candidate;
+          break;
+        }
+        oldUnkeyedIndex++;
+      }
+
+      if (oldNode && isSameNodeType(oldNode, newNode)) {
+        processedOldNodes.add(oldNode);
+
+        // Check if node is in the right position
+        const currentIndex = oldNodes.indexOf(oldNode);
+        if (currentIndex !== i) {
+          if (i < oldNodes.length) {
+            container.insertBefore(oldNode, oldNodes[i]);
+          } else {
+            container.appendChild(oldNode);
+          }
+        }
+
+        patchNode(oldNode, newNode);
+        oldUnkeyedIndex++;
+      } else {
+        // Insert new node
+        if (i < container.childNodes.length) {
+          container.insertBefore(newNode, container.childNodes[i]);
+        } else {
+          container.appendChild(newNode);
+        }
+      }
+    }
+  });
+
+  // Remove old nodes that weren't reused
+  oldNodes.forEach(node => {
+    if (!processedOldNodes.has(node) && container.contains(node)) {
+      container.removeChild(node);
+    }
+  });
+
+  cache.html = htmlString;
+};