What’s new in React 17? | Thirdock Techkno

1> React 17 is a “stepping stone” release
2> Gradual Upgrades
3> Event Delegation changes
4> Aligning with Browsers
5> No Event Pooling
6> Effect Cleanup Timing
7> Consistent Errors for Returning Undefined
8> Removing Private Exports

React 17 is a “stepping stone” release

-> The React 17 release is unusual because it doesn’t add any new developer-facing features.

-> React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.

Gradual Upgrades

-> React 17 enables gradual React upgrades.

-> When you upgrade from React 15 to 16 (or, soon, from React 16 to 17), you would usually upgrade your whole app at once.

-> This works well for many apps. But it can get increasingly challenging if the codebase was written more than a few years ago and isn’t actively maintained. And while it’s possible to use two versions of React on the page, until React 17 this has been fragile and caused problems with events.

Event Delegation changes

-> In React 17, React will no longer attach event handlers at the document level.

-> Instead, it will attach them to the root DOM container into which your React tree is rendered:

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

-> In React 16 and earlier, React would do document.addEventListener() for most events.

-> React 17 will call rootNode.addEventListener() under the hood instead.

-> Thanks to this change, it is now safer to embed a React tree managed by one version inside a tree managed by a different React version.

-> This change also makes it easier to embed React into apps built with other technologies.

Aligning with Browsers

-> The onScroll event no longer bubbles to prevent common confusion.

-> React onFocus and onBlur events have switched to using the native focusin and focusout events under the hood

-> Capture phase events (e.g. onClickCapture) now use real browser capture phase listeners.

No Event Pooling

-> React 17 removes the “event pooling” optimization from React.

-> The old event pooling optimization has been fully removed, so you can read the event fields whenever you need them.

Effect Cleanup Timing

-> In React 17, the timing of the useEffect cleanup function more consistent.

useEffect(() => {
	// This is the effect itself.
    return () => {
      // This is its cleanup.
    };
});

-> In React 17, the effect cleanup function always runs asynchronously — for example, if the component is unmounting, the cleanup runs after the screen has been updated.

Consistent Errors for Returning Undefined

-> In React 16 and earlier, returning undefined has always been an error:

function Button() {
	return; // Error: Nothing was returned from render
}

-> In React 17, the behaviour for forwardRef and memo components is consistent with regular function and class components. Returning undefined from them is an error.

let Button = forwardRef(() => {
	// We forgot to write return, so this component returns undefined.
	// React 17 surfaces this as an error instead of ignoring it.
	<button />;
});

let Button = memo(() => {
    // We forgot to write return, so this component returns undefined.
    // React 17 surfaces this as an error instead of ignoring it.
    <button />;
});

-> For the cases where you want to render nothing intentionally, return null instead.

Removing Private Exports

-> In React 17, these private exports have been removed.

-> React Native for Web was the only project using them, and they have already completed a migration to a different approach that doesn’t depend on those private exports.

Conclusion

-> In React 17 release, Many problems has been fixed. This means that when React 18 and the next future versions come out, you will now have more options