React Notes
Differences in React Versions
React 18
Concurrent rendering: React can interrupt, pause, resume, or abandon a render.
Transitions: prioritize rendering of components that are on screen.
Automatic Batching: group multiple updates together and apply them in a single batch. This can improve performance by reducing the number of renders needed.
Server Components: allow for server-side rendering of components that can update asynchronously.
Improved Suspense: include the ability to use Suspense for data fetching and on the server, in addition to its current use case for code splitting.
New JSX Transform: new JSX Transform that will allow for faster and more flexible builds. This will replace the current Babel-based transform.
React 17
Event delegation changes: React 17 introduced a change to the event delegation process. Previously, React 16 attached event listeners to the document, which could cause issues if other parts of the application interfered with the event. In React 17, events are attached to the root DOM container of the React application.
Better error handling: React 17 introduced some improvements to the error handling process, making it easier to diagnose and troubleshoot issues. Error messages are now more descriptive and include a full stack trace.
Support for
<React.StrictMode>
without console warnings: In React 16, using<React.StrictMode>
would often result in a flood of console warnings. This issue has been resolved in React 17, making it easier to use strict mode without encountering any issues.Updated createRef(): In React 17, the createRef() API has been updated to work better with function components. Previously, it could only be used with class components.
Bundling improvements: React 17 includes improvements to the bundling process, which can result in smaller bundle sizes and faster load times.