Hacker News Reader

Comment by nkg | Hacker News Reader

As users, don't you get mad when you type "mustang" in an input and it displays "msutgna" because of some badly handled onChange event? We are overriding so much of the browser's default behavior that we need to reimplement its basic features.

View on HN

Yes. I wish native browser inputs would step out of 1994, but at the same time my preferred answer to this case is simply using an uncontrolled input rather than piling more layers of complexity on top of it.

I've never experienced that. Mind sharing an example?

That would happen when, for example, you're saving the value of the text input in redux, and the input is then updated with that value on change, although it's also updated by the user typing and the thread is blocked at the same time, thus we have a race condition.

That said — it only happens when one over-engineers stuff. Make sure to have a single source of truth, and that will be avoided.

The best approach is to always updated the input synchronously in React (in the same tick when the event is handled). If you do it in another tick, you will always have to handle race conditions. This is a problem for all input elements though, not specific to React or even the Web.

The last time I experienced it I was using search bar on AliExpress.com's mobile website

I have already encounter this behaviour, but I do not understand it. What is the mistake to avoid ?

That probably not just input, but content editable. Unfortunately this feature is really very hard to support well and there are still bugs in all editors.

Reply on news.ycombinator.com