Why is the entire value of a textarea constantly sent to the server on every key press?

[umarbutler]

Hi,
I've just started trying out NiceGUI and almost immediately I've noticed that, upon creating a text area and then typing some stuff into it, every single time a key is pressed, the entire value of the text area appears to be sent to the web server via a Websockets stream.

The code I've used is as follows:

from nicegui import ui


@ui.page('/')
def main() -> None:
    prompt = ui.textarea()
    message = ui.textarea()
    submit = ui.button('Submit')
    output = ui.textarea()
    
    def answer() -> None:
        output.value = f'{prompt.value} + {message.value} = 42'
    
    submit.on_click(answer)
    
ui.run()

This is what the stream's log looks like:

Perhaps I'm misunderstanding the logs and all that data is actually not being sent. But if it is, why? Wouldn't it be much simpler to dispatch a GET request or a single Websockets request only when the submit button is clicked? It seems wasteful of bandwidth.

I'd like to scale whatever I built with NiceGUI to a very large userbase so it's important to know how to avoid wasted bandwidth.

[falkoschindler]

Hi @umarbutler,

It was one of NiceGUI's central design decisions to always synchronize state with the server to allow other parts of the code to access current values, handle events, validate inputs etc. In some cases this can indeed cause a significant overhead. Elements like ui.log, ui.scene or ui.codemirror avoid it by sending updates rather than the whole state. And for text areas you can derive your own element from Quasar's QInput and request the current model value on demand:

class MyTextarea(ui.element):
    def __init__(self, value: str = '') -> None:
        super().__init__(tag='q-input')
        self._props['type'] = 'textarea'
        self._props['model-value'] = value

    async def get_value(self) -> str:
        return await ui.run_javascript(f'return getElement({self.id}).modelValue')

@ui.page('/')
def page():
    async def submit():
        ui.notify(await text.get_value())

    text = MyTextarea('Hello')
    ui.button('Submit', on_click=submit)