handling input values without using form

[acivitillo]

I am trying to connect input values to state, I think this is normal in React? However, when I do this the input element in the webpage becomes uneditable.

from black import click
from idom import html, run, use_state, component
import requests


@component
def create_user():
    value, set_value = use_state({"username": ""})
    return html.div(create_user_form(value, set_value))


@component
def create_user_form(value, set_value):
    """
    endpoint: /api/users
    schema: {
      "username": "string",
      "name": "string",
      "surname": "string",
      "email": "string"
    }"""

    def handle_click(event):
        print("this", event)

    username = html.label(
        "username ",
        html.input({"name": "username", "value": value["username"]}),
        html.br(),
    )
    btn = html.button({"onClick": handle_click}, "Submit")
    return html.div([username, btn])


run(create_user, port=8001)

[acivitillo]

ok I figured it out, we need to update the state as we type, this means we need to call a function to set the value state onChange, check the 2 lines I added below. Question, how does this look like performance wise? We are hitting the server with a lot of events now, I guess this is why we are using websockets?

html.input(
            {
                "type": "text",
                "placeholder": "Your message...",
                "value": email, #this
                "onChange": lambda event: set_email(event["target"]["value"]), #< and this
            }
),

[rmorshea]

Here's a quick benchmark which should tell you how many times IDOM can render per second:

import time
from idom import component, html, run as idom_run, use_state

@component
def Benchmark():
    run, set_run = use_state(False)
    start, set_start = use_state(None)
    stop, set_stop = use_state(None)
    count, set_count = use_state(0)

    def handle_toggle(event):
        set_run(not run)
        if run:
            set_stop(time.time())
        else:
            set_start(time.time())
            set_stop(None)
            set_count(0)

    count, set_count = use_state(0)

    if run:
        set_count(count + 1)

    return html.div(
        html.p(count),
        html.p(stop - start if (start and stop) else None),
        html.button({"onClick": handle_toggle}, "stop" if run else "start"),
    )

idom_run(Benchmark)

Running locally I can get around two renders per millisecond (the GIF makes the updates look less continuous than they actually are):

With that said though, network latency, rather than performance of the server, is probably going to be the biggest factor when it comes to performance. IDOM only sends diffs of the view over the network so while that does mitigate the problem to some extent, IDOM will always perform slightly worse than alternate solutions which only need to send the data model over the wire.

[rmorshea]

For a networked example running on Heroku's cheapest instance, you can see this example in the second code block (the first one is intentionally broken) which tells a dot to follow the mouse around:

[acivitillo]

thanks! I am reading also through the source code to understand better what happens server side.

[rmorshea]

If you have any questions feel free to start a discussion or book a slot during office hours. I'd be happy to talk through anything that seems confusing.