Alpine: Unnecessary multiple component refresh for single update

[ahmedkandel]

Original I wanted to use a computed property but after reading #79 found that it is easy to call a method in x-text and all is done while still x-watch will be helpful addition.

Then I faced an issue of repeated rendering because inside the computed property I had to mutate some x-data properties e.g. inside cartTotal() i had to set this.cart_tax and this.cart_discount.

So in order to wait for the last mutated property then update once, I found the undocumented boolean property self.pauseReactivity and updateElements($el) method which will help a lot in controlling reactivity and repeated rendering.

Q: Is there a better approach to access those properties and methods other than this.$el.__x.pauseReactivity and this.$el.__x.updateElements($el)?

Also, I think Alpine needs to avoid repeated rendering, especially with a large set of data. Am I right or just obsessed with performance?

[SimoTod]

Calling a function in x-text to check when a component is refreshed feels a bit weird.

I know @ryangjchandler is working on a PR to emit events when something happens in your component lifecycle which will probably help you a lot.

About performance, it would be nice if the component refreshed only when required but it's not a big concern at the moment.

The goal would be to have a lot of small components in your page so the overall size shouldn't be too relevant (this is one of the reasons why Alpine doesn't support passing the scope from a parent to a child component, we don't want people to create a god component using the body tag: that would affect performances a lot when Alpine needs to walk down the DOM).

[cekvenich]

@SimoTod I made example of x-data for you, you can run/view source & console here:

• https://cekvenich.github.io/alp

( But full source is https://github.com/cekvenich/alp )

Let me know if this helps and if you need more examples.

[SimoTod]

@cekvenich I think you commented on the wrong issue 🤣, this one is not the ticket about custom elements.
Thanks, I'll have a look in the next few days. 👍

[cekvenich]

@SimoTod Oooh. Should I delete all the comments and put in right place?

[ahmedkandel]

@SimoTod Sure I like Alpine's approach not to create a god component but to have small sprinkled components. While my request was a little bit different:

Calling a function in x-text to check when a component is refreshed feels a bit weird.

I didn't understand what do you mean? Sorry, maybe my comment was not clear. Here is a CodePen to demo what I mean. https://codepen.io/tomorrowsystem/pen/xxGWzrp?editors=1000

First, try to add 3 or 4 items and notice the render counter.

Then refresh then uncomment lines 66 and 77 to pause/resume reactivity then try adding items again.

[SimoTod]

From your first comment i thought you were using x-text to implement a watcher (like you do for render count but i understand that it's just to show your point here).

As I said, it would be nice if we can decrease the unnecessary refreshes but it should probably be fixed in the library so everybody would benefit from it.
Not sure how doable it is, though.

The risk of using undocumented internal function is that they can change at any time since they are not part of the public API.

[ahmedkandel]

I agree with you that using undocumented functionality is bad behavior, So I will check if I can do that at the core and create a PR. Thanks @SimoTod.

@cekvenich can you please remove the comments and transfer them to the right place.

[SimoTod]

Hi @ahmedkandel

I think I found the issue. The debounce function was creating a new timeout variable every time so the clearTimeout call wasn't cancelling the previous refresh.

https://codepen.io/SimoTod/pen/NWqYQwO?editors=1000 I've created a fork from your original example and applied a patch.

Unfortunately, i think it makes #271 redundant, sorry. Let me know if it fixes your issue.

[ahmedkandel]

Hi, @SimoTod

Yes I was working on the same thing.

First, I thought about wrapping runListenerHandler in x-on directive with component.pauseReactivity = true before it and component.pauseReactivity = false + component.updateElements(component.$el) after the handler which is ok but it seems like a work around.

Then having a look at debounce function found that var timeout is reset with each call and never gets cleared by the next mutation.

I will make #271 redundant and only update the component once. I was doing some unit test so if you want you can proceed or i can add more commits to #271 to fix both #250 and #272