While there aren’t too many things to highlight in the new React JS 17 release, there are a few new high-sway enhancements to the React JS Core.
The Newest Enhancements
The more exciting enhancement is the way React JS is compiled. Let’s look at the compiled code of JSX in a component that uses an older version of React JS:
Use the function “React.createElement,” where the React JS dependency should be available in the scope. You must import React JS in the first place in each of the components.
Once you upgrade to React JS 17, you can remove the React JS imports from your component’s code if it’s only there for JSX.
The compiled version doesn’t require the React import. As you can see in the image below, the React JS 17 compiler imports a new dependency from the “react/jsx-runtime,” which handles the JSX transformation.
It’s important to understand that the overall effect will be visible when you have more React JS components in your codebase.
Why You Need to Remove the React JS Import
Bundle Size Reduction
Your compiled bundled output will become smaller when you remove the React JS import. You need to remove React JS import from each of the components where the compiler replaces it with a submodule in React JS, as shown below.
Sharing Components is Easier
It might not sound like much, but when publishing components to Node Package Manager (NPM), you need to ensure that the React isn’t configured as a “dependency” but rather as a “peerDependency.” This reduces your components’ bundling size and prevents cases where React JS is installed multiple times with different versions.
Reducing Dynamic Property Lookup
React JS 17 no longer uses “React.createElement” for JSX and eliminates the need for a dynamic property lookup. You can find this in the compiled version of the front-end codebase.
Changes to Event Delegation
In React JS 17, React JS will no longer attach event handlers at the document level. Instead, it will attach them to the root DOM container into which your React JS tree is rendered.
Consider attaching an “onClick” event to a button in React JS like the example below:
In the code above, the JS equivalent, when compiled, will look like this:
React JS then attaches one handler per event type to the document node directly instead of attaching it to the originally declared DOM nodes. This is called event delegation.
In React JS 17, the event handlers will no longer be attached at the document level, but they will be attached to the DOM container where the tree was rendered.
With this change in React JS 17, it is now safe to nest apps built with different React JS versions.
Updated Breaking Changes
There are a few new breaking changes with this version.
Aligning with Browsers
React JS has made a few changes related to the event system:
- The “onScroll” event no longer bubbles.
- The “onBlur” and “onFocus” events have now switched to using native “focusin” and “focusout” events internally to match React’s existing behavior and provide more information better.
- The “onClickCapture” now makes use of actual browser capture phase listeners.
No Event Pooling
Event pooling optimization has been removed from this new version of React JS due to continued confusion and its lack of performance improvement.
Upgraded Effect Clean-Up Timing
This new version also makes the “useEffect” hook clean-up function timing more consistent.
In React JS 16, the effect clean-up function runs synchronously. In React JS 17, the effect clean-up function always runs asynchronously — for example, if the component is unmounting, the clean-up runs after the screen has been updated.
The Newest Release is Significantly Important
The JSX transform is backward compatible where the change is minimal to upgrade to React JS 17. Although most of these improvements aren’t as visible to the real world, it’s also important to understand that most of these improvements will speed up future releases. Upgrading to React JS 17 will make your codebase future proof, and you won’t need to remind yourself to keep React JS import in your JSX files. For more information on this upgrade, contact our technical experts today.