perf issue: How to get better performance when there are a large number of elements that have binding?

[weinibuliu]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from dataclass import dataclass

from nicegui import ui

@dataclass
class Demo:
    id:str

for _ in range(1000): # In fact, it will be more than 1000.
    demo = Demo()
    ui.label("null").bind_text_from(demo, "id")

ui.run()

Description

Hi everyone!

I have a lot of label need to bind_text_from a dataclass.

However, if a value changed, it will not change again. Thus, binding module's actively checking is not useful any more. But the checking is still runing, so it is not firendly to CPU and causes some lag.

Is there a way to have it change only once and not check again after a successful update?

Thanks.

NiceGUI Version

2.19.0

Python Version

3.9.10

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @weinibuliu,

Could you use a bindable dataclass? This would eliminate the overhead of checking the value endlessly.

[weinibuliu]

I have seen it in docs, but I have no try now. I will try to use it.

[weinibuliu]

Hi @falkoschindler ! Thanks for your reply. It seem to be nice.
The reason why I don't try it before is the docs not clearly telling it will be more powerful.

But I still have another perf issue. Let me edit the code at first.

from nicegui import ui
from nicegui.binding import bindable_dataclass


@bindable_dataclass
class Demo:
    id: int = 0


def create_label():
    demo = Demo()
    ui.label("null").bind_text_from(Demo, "id").on(
        "Click", lambda: ui.navigate.to(f"/{demo.id}", new_tab=True)
    )


def create_100_labels():
    for _ in range(100):
        create_label()


ui.button("Create 100 labels", on_click=create_100_labels)
# ui.timer(0.5, create_100_labels) # it will be like this in fact.

ui.run()

When the labels are being created, the on will be slower to respond. When I click on a label, it can take several seconds for it to respond.
Is there any way to fix this? Would it be better if I use a ui.pagination to limit the number of labels per page?
I had tried to use ui.link() to replace the on, but the ui.link() don't have bind_target_from.

Anyway, thanks for your reply again.

[falkoschindler]

Strange. For me it reacts instantaneously.

it will be like this in fact

Are you saying you create 200 labels per second? This can be a bit much. ui.pagination can help to limit the number of elements in the DOM.

[weinibuliu]

Strange. For me it reacts instantaneously.

I simplified my code as much as possible, so there may be some differences.

it will be like this in fact

Are you saying you create 200 labels per second?

In some extreme cases, it' will keep that speed. This is why I haven't tried to use the ui.pagination() is it just needed in some cases.

I think ui.link() is a good choice to mem but we don't have bind_target_from. Like #779 said , maybe we couldn't provide it. How I update the target when the id changed?

Maybe I can use a ValueElement to do this. But I'm worried about the performance.

...

class DemoValueElement(ValueElement):
    pass

demo_value_ele = DemoValueElement()
demo_value_ele.bind_value(demo, "id")
demo_value_ele.on_value_change(...)

[weinibuliu]

When the labels are being created, the on will be slower to respond. When I click on a label, it can take several seconds for it to respond.

By the way, I think the reason of this issue may be that when a large number of elements are being generating, nicegui cannot respond to signal processing in time(Sometime, not even responding at all).

[weinibuliu]

Hi @falkoschindler ! Thank you very much for your reply.

Over the past period of time, I have refactored my project to implement the ui.pagination() functionality.
All issues have been resolved so I will change the title of the discussion and close it. If you have any additions, you can always reopen it.

Thanks again.