commit deletion

[lxsmnsyc]

Hello, I saw this repo for reverse-engineering or creating your own React library. It was a great project, but I have a question.

In this specific line: https://github.com/pomber/didact/blob/master/didact.js#L136

function commitDeletion(fiber, domParent) {
  if (fiber.dom) {
    domParent.removeChild(fiber.dom)
  } else {
    commitDeletion(fiber.child, domParent)
  }
}

How does commitDeletion perform on sibling fibers of the given child fiber?

[pomber]

Good question. The trick is: if fiber.dom is null it means it's the fiber of a function component, and function components never have more than one child (Didact doesn't have Fragments like React).

[lxsmnsyc]

Oh, I didn't notice it was implemented that way, thanks for the reply!

I'm curious, how would you implement it if it can accept multiple children?

[pomber]

It's more complex because you need to search the different dom nodes that may be at different levels on the subtrees.
See here: https://gist.github.com/pomber/64fb7e63119bef201dd8166b0fce73c4#file-didact-fiber-js-L30 (from https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec)

[lxsmnsyc]

I see, thanks! I had a different implementation by iterating each children and then doing the recursive call to commitDeletion: https://github.com/LXSMNSYC/luact/blob/master/luact/fiber/commit_delete/init.lua

Anyways, big thanks to this DIY React project of yours, I get to learn about React Fiber's internal workings!