useControlHandlers cause unnecessary rerenders?

[seriusokhatsky]

Hello team,

I investigated Stackable performance and noticed that some elements are rendered constantly. I checked the code and found that you use useControlHandlers and useBlockAttributesContext hooks for attributes in your controls, for example. If I understood correctly, these hooks should make a particular control render only if a particular attribute is changed, and it should work great.

However, when I performed my tests with console.log, I noticed that controls are rendered even if non-related attributes are changed. It may not be the right way to check this (with console.log). But I would be very grateful if you could explain to me why it works like that.

HOW TO REPRODUCE

1. Case with useControlHandlers hook inside AdvancedSelectControl. Here is a video that shows that when I change button style attribute, control for "Hover effect" also renders. Just add console.log to the component and try to change some element options.

2. Without useControlHandlers. Just make value and onChange constant (break the control functionality).

As you can see, it doesn't call the consol.log function so I suppose that it also doesn't rerender the component. Is something broken, or are my tests not correct?

Thank you for your time.

[seriusokhatsky]

@bfintal can you check this please?