Skip to content

Widget re-renders too much times

Expected behavior

When we create a sib-display with 1 widget, this widget should render only once.

What's happening?

We re-render a widget each time we edit an attribute (label, name, value ...) Some time, these widgets contains components (sib-display in a sib-widget). Each time the widget re-renders, the component inside re-populate

For example on Hubl, for the widget hubl-team-template which contains a sib-display:

  • we edit 3 attributes -> 3 re-renders, and 3 re-populate for the sib-display
  • each widget of the sib-display edits 3 attributes -> 3 re-render for each widget

For the last widget displayed, in this example, we have 3 * 3 = 9 renders, but it should have been only one.

We can see that in complex example, it can be a big bottleneck

Possible solutions

We can check if a widget is in the DOM before rendering. As we set the attributes before adding it in the DOM, we already save a lot of renders.

However, today, we put the widget in the DOM, and then the value resolves. So we still have 2 renders for each widgets.

We could also add an attribute which blocks rendering when present. When this attribute is removed, the widget start rendering and updating each time an attribute changes.

Or we could re-write entirely our rendering system, which might happen anyway

@sylvain @balessan @clement, any opinion on this?