Loops in "state" logic — a bad idea?

UI Builder
1

In the UI Builder, there are are event handlers (“On Click”, “On Mount”, etc) which trigger logic to run when a particular event happens. Then there are also “state” handlers (“Visibility Logic”, “Label Logic”, etc) which do not require a certain event to happen for the logic to run. This implies that in those areas, it might be a bad idea to create code that takes some time to execute, because it isn’t clear when or how often such code is executed. I’m not 100% clear about “best practices”.

So more specifically, here’s a question: we have some Selector components which require ~ 100 options (100 label/value pairs). As it is very tedious to manually set each option, we currently create these options in the “Options” logic area using a loop to populate the Selector with numbers from 1 to 100 like so:

image
image1052×778 61.3 KB

Is this a stupid way of doing things? It seems to be working fine… but does the loop run over and over again, causing the browser to compute the options for the Selector for no real reason? If so, what’s a better way to pre-populate Selectors? Create an array on Page Enter and store it in Page Data, then refer to the array in the Options logic? Any thoughts/guidance = much appreciated :blush:

2

Hi @Alex_Klein

Having a sync loop is ok, of course, if there is no a billion iterations =)
when we talk about hundreds I’m sure you won’t see any delays in your UI, however, your conclusions are correct, if it returns the same value we should avoid composing it on each render.

I recommend you prepare the static list and put it in a DataContainer, it could be an App/Page Data or any other data container (Block/Form) and then using data-binding to render it

3

Thanks for the ultra-fast answer! So the logic runs on “render”, meaning it doesn’t run in some sort of race condition but only when the browser renders or re-renders. I wonder what kinds of things trigger a “render” of a component?

4

when any data container is changing all inner components will be rendered

1 Like
5

https://backendless.com/docs/uibuilder/ui_rendering.html