In React, what’s the difference between onChange and onInput?

by

It seems there is no real difference

React, for some reason, attaches listeners for Component.onChange to the DOM element.oninput event. See the note in the docs on forms:

React docs – Forms

There are more people that are surprised by this behavior. For more details, refer to this issue on the React issue tracker:

Document how React’s onChange relates to onInput #3964

Quote from the comments on that issue:

I don’t understand why React chose to make onChange behave like onInput does. As fas as I can tell, we have no way of getting the old onChange behaviour back. Docs claim it’s a “misnomer” but not it isn’t really, it does fire when there’s a change, just not until the input also loses focus.

For validation, sometimes we don’t want to show validation errors until they’re done typing. Or maybe we just don’t want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually.

It’s not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.

I agree 100% with the comment… But I guess changing it now would bring more problems than it solves since so much code had already been written that relies on this behavior.

React is not part of the official Web API collection

Even though React is built on top of JS, and has seen a huge adoption rate, as a technology React exists to hide a whole lot of functionality under its own (fairly small) API. Once area where this is obvious is in the event system, where there’s a lot going on under the surface that’s actually radically different from the standard DOM event system. Not just in terms of which events do what, but also in terms of when data is allowed to persist at what stage of the event handling. You can read more about that here:

React Event System

More Related Contents:

  1. React onClick function fires on render
  2. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  3. The useState set method is not reflecting a change immediately
  4. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  5. Call child method from parent
  6. Getting the ID of the element that fired an event
  7. Window is not defined in Next.js React app
  8. How to maintain state after a page refresh in React.js?
  9. Simple Component is not rendering: React js
  10. Console.log() after setState() doesn’t return the updated state
  11. Where should ajax request be made in Flux app?
  12. How to load image files with webpack file-loader
  13. Understanding React-Redux and mapStateToProps()
  14. Capture the close event of popup window in JavaScript
  15. React.js: Identifying different inputs with one onChange handler
  16. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  17. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  18. Best way to polyfill ES6 features in React app that uses create-react-app
  19. html onchange event not working
  20. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  21. Determine which dependency array variable caused useEffect hook to fire
  22. What does “export default” do in JSX?
  23. Axios – DELETE Request With Request Body and Headers?
  24. Updating state to the same state directly in the component body
  25. reactjs and masonry layout – undefined
  26. Jest – SyntaxError: Cannot use import statement outside a module
  27. JavaScript/jQuery event listener on image load IE issues
  28. Fire oninput event with jQuery
  29. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment