diff --git a/surplus-v0.4.0/package.json b/surplus-v0.4.0/package.json
index 50e3a27ba..16ecfe093 100644
--- a/surplus-v0.4.0/package.json
+++ b/surplus-v0.4.0/package.json
@@ -22,8 +22,8 @@
     "url": "https://github.com/curveship/js-framework-benchmark.git"
   },
   "dependencies": {
-    "s-js": "^0.4.0",
-    "s-array": "^0.4.2",
+    "s-js": "^0.4.1",
+    "s-array": "^0.4.5",
     "surplus": "^0.4.0"
   },
   "devDependencies": {
diff --git a/surplus-v0.4.0/src/store.ts b/surplus-v0.4.0/src/store.ts
index 00d31128b..079e1c20c 100644
--- a/surplus-v0.4.0/src/store.ts
+++ b/surplus-v0.4.0/src/store.ts
@@ -14,7 +14,7 @@ export class Row {
 
 export class Store {
     data = SArray<Row>([]);
-    selected = S.data<number | undefined>(undefined);
+    selected = S.value<number | undefined>(undefined);
     id = 1;
 
     buildData(count = 1000) {
diff --git a/surplus-v0.4.0/src/view.tsx b/surplus-v0.4.0/src/view.tsx
index 58423501c..3ed4c17ad 100644
--- a/surplus-v0.4.0/src/view.tsx
+++ b/surplus-v0.4.0/src/view.tsx
@@ -4,7 +4,9 @@ import { App } from './controller';
 
 Surplus;
 
-const USE_NON_KEYED_TBODY = location.search.indexOf('keyed') === -1;
+const 
+    USE_NAIVE_TBODY = location.search.indexOf('naive') !== -1,
+    USE_KEYED_TBODY = location.search.indexOf('keyed') !== -1;
 
 type RowTr = HTMLTableRowElement & { _id : HTMLTableCellElement, _label : HTMLAnchorElement };
 
@@ -18,10 +20,10 @@ export let AppView = (app : App) =>
                     <div className="col-md-6">
                         <div className="row">
                             <div className="col-sm-6 smallpad">
-                                <button type="button" className="btn btn-primary btn-block" id="run" onClick={e => app.run(!USE_NON_KEYED_TBODY)}>Create 1,000 rows</button>
+                                <button type="button" className="btn btn-primary btn-block" id="run" onClick={e => app.run(USE_KEYED_TBODY)}>Create 1,000 rows</button>
                             </div>
                             <div className="col-sm-6 smallpad">
-                                <button type="button" className="btn btn-primary btn-block" id="runlots" onClick={e => app.runLots(!USE_NON_KEYED_TBODY)}>Create 10,000 rows</button>
+                                <button type="button" className="btn btn-primary btn-block" id="runlots" onClick={e => app.runLots(USE_KEYED_TBODY)}>Create 10,000 rows</button>
                             </div>
                             <div className="col-sm-6 smallpad">
                                 <button type="button" className="btn btn-primary btn-block" id="add" onClick={e => app.add()}>Append 1,000 rows</button>
@@ -41,7 +43,7 @@ export let AppView = (app : App) =>
             </div>
             <table className="table table-hover table-striped test-data"  
                 onClick = {(e : any) => e.target.matches('.delete') ? app.delete(rowId(e)) : app.select(rowId(e))}>
-                { USE_NON_KEYED_TBODY ? TBodyNonKeyed(app) : TBodyKeyed(app) }
+                { USE_NAIVE_TBODY ? TBodyNaive(app) : USE_KEYED_TBODY ? TBodyKeyed(app) : TBodyNonKeyed(app) }
             </table>
             <span className="preloadicon glyphicon glyphicon-remove"></span>
         </div>,
@@ -49,21 +51,38 @@ export let AppView = (app : App) =>
         while (el.tagName !== 'TR') el = el.parentElement!; 
         return +el.childNodes[0].textContent!; 
     },
+    TBodyNaive = (app : App) =>
+        <tbody>
+            {app.store.data.mapSample(row =>
+                <tr className={app.store.selected() === row.id ? 'danger' : ''}>
+                    <td className="col-md-1">{row.id}</td>
+                    <td className="col-md-4">
+                        <a>{row.label()}</a>
+                    </td>
+                    <td className="col-md-1"><a><span className="glyphicon glyphicon-remove delete"></span></a></td>
+                    <td className="col-md-6"></td>
+                </tr>
+            )}
+        </tbody>,
     TBodyKeyed = (app : App) => {
-        let trs = app.store.data.mapSample(row =>
-            <tr>
-                <td className="col-md-1" innerText={row.id}></td>
-                <td className="col-md-4">
-                    <a innerText={row.label()}></a>
-                </td>
-                <td className="col-md-1"><a><span className="glyphicon glyphicon-remove delete"></span></a></td>
-                <td className="col-md-6"></td>
-            </tr>);
+        const index = {} as { [id : number] : HTMLTableRowElement | undefined},
+            trs = app.store.data.mapSample(row =>
+                <tr ref={index[row.id]!}>
+                    <td className="col-md-1" innerText={row.id}></td>
+                    <td className="col-md-4">
+                        <a innerText={row.label()}></a>
+                    </td>
+                    <td className="col-md-1"><a><span className="glyphicon glyphicon-remove delete"></span></a></td>
+                    <td className="col-md-6"></td>
+                </tr>,
+                row => index[row.id] = undefined);
 
-        S.on(app.store.selected, () => {
-            let sel = app.store.selected(), data = app.store.data();
-            trs().forEach((tr, i) => tr.className = data[i].id === sel ? 'danger' : '');
-        });
+        S.on(app.store.selected, (tr? : HTMLTableRowElement) => {
+            if (tr) tr.className = '';
+            tr = index[app.store.selected()!];
+            if (tr) tr.className = 'danger';
+            return tr;
+        }, undefined);
         
         return <tbody>{trs}</tbody>;
     },