On 20th October the new version of React was released which was a major release for ReactJS after two long years. But surprisingly there were no major developer features that were introduced in this release, rather features related to backward compatibility were introduced to make it easier to upgrade React.
\nThe new version of React doesn't add any new developer features to it rather it focuses on adding backward compatibility with old versions of react. React 17 will serve as the bridge between the older and upcoming versions of ReactJS. The team is working on the new features like concurrent mode but they are not a part of this release.
\nReact 17 allows multiple versions of React to be embedded inside the DOM tree. This is one of the major benifits of React 17.
\nWith React 17 you can do gradual React updates. You can update the entire app from the older version to the new version completely or part by part.
\nReact 17 provides two options to upgrade your app to the next version of React, say React 18. Either you can upgrade your entire app at once or migrate your app piece by piece.
\nIn React 17 changes have been made to event delegation. It was possible even before to embed multiple versions of React inside a DOM tree but it was a very delicate move considering how the React event system worked.
\nIn React we write a click event like:
\n <button onClick={handleClick}>This event does not attach itself to the document node on which it is written rather it attaches itself to the document root in React 16 and previous versions of React. In React 17 the event is attached to the root dom container in which your tree is rendered.
\n const rootNode = document.getElementById('root');\n ReactDOM.render(<App />, rootNode);The below diagram shows us how the event progation works in React 16 vs React 17.
\nThe above code will turn into The react team has worked closely with the babel developers to introduce this feature. There is a chance that this feature may reduce the bundle size according to the react docs.const MyComponent = ()=> (\n <div>\"some text man\"</div>\n)import { jsx as _jsx } from \"react/jsx-runtime\";\n\nfunction MyComponent() {\n return _jsx(\"div\", `\"some text man\"`);\n}