You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
all onWillPatch hooks are called (in the parent->child order) before the DOM is modified
then we patch the DOM with the new virtual dom
finally, we call onMounted/onPatched hooks are called (in the child->parent) order
The idea is that we may want to measure stuff in onWillPatch before the dom is changed, so it should be called before. Also, once it's done, we want to call the onMounted and onPatched in the opposite order, so a parent is guaranteed that all its children are ready.
This works fine, as far as I can tell. However, what if we have multiple renderings?
For example, imagine that we have two components: Parent and Child, with no props, so the Child can be updated independently. Now, we update Parent, and a few micro ticks later, we update Child. See playground
So, if you look at it, you will see that clicking on the update button logs the following:
This is because we have two distincts renderings, and they are independent. So, even though they complete in the same animation frame, they are not properly coordinated.
This means that the parent onPatched hook is called before the child, which may be an issue (this is why I was notified of this problem).
We can probably easily reorder the fibers before applying them, but then we would have the following:
Note that the problem was always present, but may be more pressing now if we use the fine grained reactivity, because there are now many more situations where we have small independent renderings
Owl guarantees that in a render:
onWillPatch
hooks are called (in the parent->child order) before the DOM is modifiedonMounted
/onPatched
hooks are called (in the child->parent) orderThe idea is that we may want to measure stuff in
onWillPatch
before the dom is changed, so it should be called before. Also, once it's done, we want to call theonMounted
andonPatched
in the opposite order, so a parent is guaranteed that all its children are ready.This works fine, as far as I can tell. However, what if we have multiple renderings?
For example, imagine that we have two components:
Parent
andChild
, with no props, so theChild
can be updated independently. Now, we update Parent, and a few micro ticks later, we update Child. See playgroundSo, if you look at it, you will see that clicking on the update button logs the following:
This is because we have two distincts renderings, and they are independent. So, even though they complete in the same animation frame, they are not properly coordinated.
This means that the parent onPatched hook is called before the child, which may be an issue (this is why I was notified of this problem).
We can probably easily reorder the fibers before applying them, but then we would have the following:
The
onPatched
hook are correct, but then the parentonWillPatch
is called after patching its child, so it seems wrong also.It feels like we actually want this:
But this would interleave actions taken from two different renderings, which is a big change.
The text was updated successfully, but these errors were encountered: