mcc @mcc@mastodon.social
Public

So i wrote a Yew component. It's supposed to be like, a chat room. Currently, when you type something and say "post", it replaces the bolded text above the text entry field.

I… sort of hate how I did this. With the input content being shadowed in state. I think this means every input change is accompanied by an unnecessary copy, and I *think* an unnecessary remount.

The Yew discord assures me this is the idiomatic way to do it. But they also think it's probably doing the superfluous remount.

let input = use_state_eq(|| "".to_string()); let display = use_state(|| "".to_string()); let placeholder = use_state(|| "Type here".to_string()); let on_input = { let input = input.clone(); Callback::from(move |e:InputEvent| { let value = e.target_unchecked_into::<HtmlInputElement>().value(); input.set(value); }) }; let on_submit = { let input = input.clone(); let display = display.clone(); let placeholder = placeholder.clone(); Callback::from(move |e:SubmitEvent| { let result = input.to_string(); e.prevent_default(); display.set(result); if placeholder.len() > 0 { placeholder.set("".to_string()); } input.set("".to_string()); }) }; html! { <div> <h4>{ display.to_string() }</h4> <div className="Controls"> <form className="PostBox" onsubmit={on_submit} > <div> <input placeholder={placeholder.to_string()} value={input.to_string()} oninput={on_input} maxlength={MAX_CHAT.to_string()} /> </div> <input className="PostButton" type="submit" value="Post" /> </form> </div> </div> }Screenshot of the HTML element from the code
0
0
0

If you have a fediverse account, you can quote this note from your own instance. Search https://mastodon.social/users/mcc/statuses/116099771176233440 on your instance and quote it. (Note that quoting is not supported in Mastodon.)