pomber/didact

commit deletion

lxsmnsyc opened this issue · 4 comments

lxsmnsyc commented

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 commented

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).

  • 👍1
lxsmnsyc commented

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 commented

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 commented

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!