4 ms·
I recently attempted to remove React as a dependency just to see what would happen. It turns out different browsers are still incredibly inconsistent when it co
by kccqzy 2y ago
I recently attempted to remove React as a dependency just to see what would happen. It turns out different browsers are still incredibly inconsistent when it comes to event handling. For example the select event on an <input> element somehow doesn't fire at all on Safari during my test, and doesn't fire when the caret is merely moved on some browsers. Using just the native browser functions isn't just fine, even if you don't need all the React features like components or state or props. It turns out React DOM is valuable as it papers over browser differences.
- divbzero 2y agoI haven’t tested myself, but according to MDN the select event on <input> elements should be supported by Safari? https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputEl...
- kccqzy 2y agoThe MDN page you linked to includes a nice selection logger example. It just doesn't work on my Safari (iOS).
- chrismorgan 2y agoAnd does an equivalent in React work? Because I don't believe React does any of the papering-over you describe. My understanding (as a non-user) is that React does, logically, essentially nothing special around event handling.
- kccqzy 2y agoI don't remember off the top of my head whether this specific example works in React as I'm not next to a computer. But I remember reading React source code and finding a whole lot of code to handle the select event. (Just found it by doing a GitHub code search on my phone https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js#L137 https://github.com/facebook/react/blob/7c8e5e7ab8bb63de91163...) In general React has its own event handling code. For one in React the user doesn't even deal with the browser native DOM events but React synthetic events. React also readily creates brand new synthetic events from other browser events. React also sometimes gives different names or behaviors to browser events; the most famous example is that the React onChange event is roughly equivalent to the browser onInput event, but absolutely different from the browser onChange event.
- chrismorgan 2y agoGood to know, thanks. I knew it made synthetic events, but thought it was all still 1:1. I see I was completely wrong. I gotta say, yuck. Don't like it, wish they'd taken a more polyfill-like approach.
- Izkata 2y agoIIRC they do that to deal with browser differences and be consistent with things like event bubbling. Probably other benefits as well but that's the one I'm fairly sure I remember from years ago.
- fiddlerwoaroof 2y agoThere are a couple of edge cases I forget at the moment where react event handlers intentionally behave differently from the DOM handlers with the same name.