Problematic behavior when trying to implement a Form

Hello, I am trying to implement a simple login form / view, here’s the view

const Login = module.exports = (state, actions) => <div key='login'>
    <h2>Login</h2>

    <FormInput label='Username' value={state.username} action={(value)=>actions.updateField({field: 'username', value}) } />
    <FormInput label='Password' value={state.password} action={(value)=>actions.updateField({field: 'password', value}) } />
    <button class='btn btn-primary' onclick={()=>actions.login()}>Ok</button>
</div>

and the FormInput component:

const FormInput = module.exports = ({label, value, action}) => <div class="form-group">
    <label class="form-label" for="{label}">{label}</label>
    <input class="form-input" type="text" id="{label}" 
        placeholder={label} value={value} 
        onkeyup={e => action(e.target.value)}
    />
</div>

(let’s ignore for now the fact that the password is a simple text input, it doesn’t matter for my question).

Now, I have the password and username on state and a corresponding action to update them, something like this:

var state = {
    auth: {
        token: null,
        username: null,
        password: null
    },
...

and

const reducers = module.exports = {
    location: location.actions, 
    auth: {
        updateField: ({field, value}) => state => {
            return {
                [field]: value
            }
        },

        login: () => state => {
            console.log("LOGIN", state);
        }

    }, 
...

I think this is a rather typical setup. The problem is that when I am writing on the textboxes I experience too much lag until the characters are actually displayed on the input - also, if I write too fast some characters are actually missing … For example if I write 123123123123123 really quick I’ll get something like this in the input: 12312322112. The problem, of course is that propagating the state for every keyup is too expensive and, in react is solved with local state. How can this problem be solved in hyperapp? Is there a technique I don’t know – the form is really not usable.

TIA

[elisherer]

I recommend trying a new library I wrote: hyperapp-forms

[spapas]

Thank you very much for all the answers !