{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/13525","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/13525/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/13525/comments","events_url":"https://api.github.com/repos/facebook/react/issues/13525/events","html_url":"https://github.com/facebook/react/issues/13525","id":356103592,"node_id":"MDU6SXNzdWUzNTYxMDM1OTI=","number":13525,"title":"React Fire: Modernizing React DOM","user":{"login":"gaearon","id":810438,"node_id":"MDQ6VXNlcjgxMDQzOA==","avatar_url":"https://avatars0.githubusercontent.com/u/810438?v=4","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"labels":[{"id":127893911,"node_id":"MDU6TGFiZWwxMjc4OTM5MTE=","url":"https://api.github.com/repos/facebook/react/labels/Component:%20DOM","name":"Component: DOM","color":"fef2c0","default":false},{"id":270986513,"node_id":"MDU6TGFiZWwyNzA5ODY1MTM=","url":"https://api.github.com/repos/facebook/react/labels/Type:%20Big%20Picture","name":"Type: Big Picture","color":"61dafb","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":32,"created_at":"2018-08-31T19:45:53Z","updated_at":"2018-08-31T21:43:11Z","closed_at":null,"author_association":"MEMBER","body":"This year, the React team has mostly been focused on [fundamental improvements to React](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html).\r\n\r\nAs this work is getting closer to completion, we're starting to think of what the next major releases of React DOM should look like. There are quite a few [known problems](https://github.com/facebook/react/issues?q=is%3Aopen+is%3Aissue+label%3A%22Type%3A+Bug%22+label%3A%22Component%3A+DOM%22), and some of them are hard or impossible to fix without bigger internal changes.\r\n\r\nWe want to undo past mistakes that caused countless follow-up fixes and created much technical debt. We also want to remove some of the abstraction in the event system which has been virtually untouched since the first days of React, and is a source of much complexity and bundle size.\r\n\r\nWe're calling this effort \"React Fire\".\r\n\r\n### 🔥 React Fire \r\n\r\n**React Fire** is an effort to modernize React DOM. Our goal is to make React better aligned with how the DOM works, revisit some controversial past decisions that led to problems, and make React smaller and faster.\r\n\r\nWe want to ship this set of changes in a future React major release because some of them will unfortunately be breaking. Nevertheless, we think they're worth it. And we have more than 50 thousands components at Facebook to keep us honest about our migration strategy. We can't afford to rewrite product code except a few targeted fixes or automated codemods. \r\n\r\n### Strategy\r\n\r\nThere are a few different things that make up our current plan. We might add or remove something but here's the thinking so far:\r\n\r\n* **Stop reflecting input values in the `value` attribute (https://github.com/facebook/react/issues/11896).** This was originally added in React 15.2.0 via https://github.com/facebook/react/pull/6406. It was very commonly requested because people's conceptual model of the DOM is that the `value` they see in the DOM inspector should match the `value` JSX attribute. But that's not how the DOM works. When you type into a field, the browser doesn't update the `value` attribute. React shouldn't do it either. It turned out that this change, while probably helpful for some code relying on CSS selectors, caused a cascade of bugs — some of them still unfixed to this day. Some of the fallout from this change includes: https://github.com/facebook/react/issues/7179, https://github.com/facebook/react/issues/8395, https://github.com/facebook/react/issues/7328, https://github.com/facebook/react/issues/7233, https://github.com/facebook/react/issues/11881, https://github.com/facebook/react/issues/7253, https://github.com/facebook/react/pull/9584, https://github.com/facebook/react/pull/9806, https://github.com/facebook/react/pull/9714, https://github.com/facebook/react/pull/11534, https://github.com/facebook/react/pull/11746, https://github.com/facebook/react/pull/12925. At this point it's clearly not worth it to keep fighting the browser, and we should revert it. The positive part of this journey is that thanks to tireless work from our DOM contributors (@nhunzaker, @aweary, @jquense, and @philipp-spiess) we now have detailed DOM test fixtures that will help us avoid regressions.\r\n\r\n* **Attach events at the React root rather than the document (https://github.com/facebook/react/issues/2043).** Attaching event handlers to the document becomes an issue when embedding React apps into larger systems. The Atom editor was one of the first cases that bumped into this. Any big website also eventually develops very complex edge cases related to `stopPropagation` interacting with non-React code or across React roots (https://github.com/facebook/react/issues/8693, https://github.com/facebook/react/pull/8117, https://github.com/facebook/react/issues/12518). We will also want to attach events eagerly to every root so that we can do less runtime checks during updates.\r\n\r\n* **Migrate from `onChange` to `onInput` and don’t polyfill it for uncontrolled components (https://github.com/facebook/react/issues/9657).** See the linked issue for a detailed plan. It has been confusing that React uses a different event name for what's known as `input` event in the DOM. While we generally avoid making big changes like this without significant benefit, in this case we *also* want to change the behavior to remove some complexity that's only necessary for edge cases like mutating controlled inputs. So it makes sense to do these two changes together, and use that as an opportunity to make `onInput` and `onChange` work exactly how the DOM events do for uncontrolled components.\r\n\r\n* **Drastically simplify the event system (https://github.com/facebook/react/issues/4751).** The current event system has barely changed since its initial implementation in 2013. It is reused across React DOM and React Native, so it is unnecessarily abstract. Many of the polyfills it provides are unnecessary for modern browsers, and some of them create more issues than they solve. It also accounts for a significant portion of the React DOM bundle size. We don't have a very specific plan here, but we will probably fork the event system completely, and then see how minimal we can make it if we stick closer to what the DOM gives us. It's plausible that we'll get rid of synthetic events altogether. We should stop bubbling events like media events which don’t bubble in the DOM and don’t have a good reason to bubble. We want to retain some React-specific capabilities like bubbling through portals, but we will attempt to do this via simpler means (e.g. re-dispatching the event).\r\n\r\n* **`className` → `class` (https://github.com/facebook/react/issues/4331).** This has been proposed countless times. We're already allowing passing `class` down to the DOM node in React 16. The confusion this is creating is not worth the syntax limitations it's trying to protect against. We wouldn't do this change by itself, but combined with everything else above it makes sense. Note we can’t just allow both without warnings because this makes it very difficult for a component ecosystem to handle. Each component would need to learn to handle both correctly, and there is a risk of them conflicting. Since many components process `className` (for example by appending to it), it’s too error-prone.\r\n\r\n### Tradeoffs\r\n\r\n* We can't make some of these changes if we aim to keep exposing the current private React event system APIs for projects like React Native Web. However, React Native Web will need a different strategy regardless because [React Fabric](http://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018) will likely move more of the responder system to the native side.\r\n\r\n* We may need to drop compatibility with some older browsers, and/or require more standalone polyfills for them. We still care about supporting IE11 but it's possible that we will not attempt to smooth over some of the existing browser differences — which is the stance taken by many modern UI libraries.\r\n\r\n### Rollout Plan\r\n\r\nAt this stage, the project is very exploratory. We don't know for sure if all of the above things will pan out. Because the changes are significant, we will need to dogfood them at Facebook, and try them out in a gradual fashion. This means we'll introduce a feature flag, fork some of the code, and keep it enabled at Facebook for a small group of people. The open source 16.x releases will keep the old behavior, but on master you will be able to run it with the feature flag on.\r\n\r\nI plan to work on the project myself for the most part, but I would very much appreciate more discussion and contributions from @nhunzaker, @aweary, @jquense, and @philipp-spiess who have been stellar collaborators and have largely steered React DOM while we were working on Fiber. If there's some area you're particularly interested in, please let me know and we'll work it out.\r\n\r\nThere are likely things that I missed in this plan. I'm very open to feedback, and I hope this writeup is helpful."},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/417796755","html_url":"https://github.com/facebook/react/issues/13525#issuecomment-417796755","issue_url":"https://api.github.com/repos/facebook/react/issues/13525","id":417796755,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzc5Njc1NQ==","user":{"login":"NangoliJude","id":22452204,"node_id":"MDQ6VXNlcjIyNDUyMjA0","avatar_url":"https://avatars3.githubusercontent.com/u/22452204?v=4","gravatar_id":"","url":"https://api.github.com/users/NangoliJude","html_url":"https://github.com/NangoliJude","followers_url":"https://api.github.com/users/NangoliJude/followers","following_url":"https://api.github.com/users/NangoliJude/following{/other_user}","gists_url":"https://api.github.com/users/NangoliJude/gists{/gist_id}","starred_url":"https://api.github.com/users/NangoliJude/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NangoliJude/subscriptions","organizations_url":"https://api.github.com/users/NangoliJude/orgs","repos_url":"https://api.github.com/users/NangoliJude/repos","events_url":"https://api.github.com/users/NangoliJude/events{/privacy}","received_events_url":"https://api.github.com/users/NangoliJude/received_events","type":"User","site_admin":false},"created_at":"2018-08-31T21:43:11Z","updated_at":"2018-08-31T21:43:11Z","author_association":"NONE","body":" I'm excited"}}
{"actor":{"display_login":"NangoliJude"}}