Update one node in a tree without cloning it

Arguments

root{ id: unknown; children?: Node[] } & Record<string, unknown>

The root node of the tree.

idunknown

The id of the node to update.

updater(node: Node) => Node

Called with the matching node; must return a new node object to put in its place.

Returns

Node — A new root with the matching node replaced, or the original root by reference when no node matched.

Examples

const tree = { id: "root", children: [
  { id: "a", children: [{ id: "a1", label: "A1" }] },
  { id: "b" },
]};
const next = updateNode(tree, "a1", (n) => ({ ...n, label: "EDITED" }));
next.children[0].children[0].label; // "EDITED"
tree.children[0].children[0].label; // "A1" — untouched

const next = updateNode(tree, "a1", (n) => ({ ...n, done: true }));
next.children[1] === tree.children[1];  // true — sibling shared
next.children[0] !== tree.children[0];  // false — path recreated

const next = updateNode(tree, "missing", (n) => n);
next === tree; // true — no match, same reference

What it has to do

• The returned tree contains the updated node.
• Every node on the path from the root to the changed node is a new object.
• Untouched subtrees are returned by reference, identical to the originals.
• When no node matches, the original root is returned by reference.
• The original tree is never mutated.

Notes

• O(n) worst case but only O(h) nodes get rebuilt — the path from root to the match. Every sibling subtree stays shared, which is what makes React memoisation downstream still fire correctly.
• The recursive trick: compare each child's recursed result with the child you passed in. If every child came back identical, return the current node unchanged so the no-op bubbles all the way up.
• This pattern is what Immer, Redux reducers and most React state libraries lean on under the hood — rebuild the spine, share the rest.