React triggers onChange events for virtual DOM inputs differently than inputs in the regular DOM. Why is this?

Question

In the virtual DOM, onChange is triggered every time the content of the input is changed. In the regular DOM, onChange is only triggered when the input element is blurred.

link to GIF illustrating the behavior

sample project:

source code for the above demo

Why does React trigger onChange events differently for virtual DOM elements?

Do you mean to ask how this is implemented in this way? Or why? The why would come down to the necessity of controlled fields and how they are to work in a react'y way; that is, when you update a controlled field by typing into it, react needs to update the state variable that represents the field's value. This can only be done if the change is triggered every time the field's value is changed. — Liam Egan
Oh yeah, I asked "why is this?" in the question heading. Ah, that makes sense. Thanks @LiamEgan — ross

Sophie Alpert Sophie Alpert · Accepted Answer · 2016-08-21T01:15:07

React DOM intentionally deviates and makes onChange fire on every change because that's almost always what you want. This is described in the documentation here: Forms.

React triggers onChange events for virtual DOM inputs differently than inputs in the regular DOM. Why is this?

1 Answers