From 7019401fec5b6f197cb0129fcb2d88f372a30972 Mon Sep 17 00:00:00 2001
From: Abhisek Pattnaik <abhisekp@engineer.com>
Date: Sun, 26 Mar 2023 08:51:28 +0530
Subject: [PATCH] Render without unnecessary renders

High-performant rendering without any unnecessary renders of other state nodes.
---
 .../src/examples/local-complex-tree-structure.tsx   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/index/src/examples/local-complex-tree-structure.tsx b/docs/index/src/examples/local-complex-tree-structure.tsx
index f492a1df..7b666ded 100644
--- a/docs/index/src/examples/local-complex-tree-structure.tsx
+++ b/docs/index/src/examples/local-complex-tree-structure.tsx
@@ -40,14 +40,23 @@ function NodeListEditor(props: { nodes: State<Node[] | undefined> }) {
     // scoped state is optional for performance
     // could have used props.nodes everywhere instead
     const state = useHookstate(props.nodes);
+    
+    const handleAddNode = () => {
+        if (state.ornull) {
+            state.merge([{ name: `Untitled ${state.ornull.value.length + 1}` }])
+        } else {
+            state.set([{ name: 'Untitled 1' }])
+        }
+    }
+    
     return <div style={{ paddingLeft: 20 }}>
         {state.ornull && state.ornull.map((nodeState: State<Node>, i) =>
-            <div key={i}>
+            <div key={nodeState.name.value}>
                 <NodeNameEditor nameState={nodeState.name} />
                 <NodeListEditor nodes={nodeState.children} />
             </div>
         )}
-        <p><button onClick={() => state.set(nodes => (nodes || []).concat([{ name: 'Untitled' }]))}>
+        <p><button onClick={handleAddNode}>
             Add Node
         </button></p>
     </div>