React 16.9: A Powerhouse Update
The results are in, and React has emerged as the clear winner in the front-end framework category, with a staggering 91% satisfaction rate and over 16,000 users. Today, we’re going to dive into the exciting new features, deprecations, and bug fixes that make React 16.9 a game-changer.
Unlocking Performance Bottlenecks with the Profiler API
The Profiler API, introduced in React DevTools v16.5, measures the rendering cost of each component to identify performance bottlenecks. However, it had its limitations. With the new <React.Profiler> component, you can now gather performance metrics programmatically, isolating specific parts of the tree that require attention. This component is automatically disabled in production builds, so you don’t need to remove it after measuring.
Asynchronous Testing with act()
React’s testing utility, act(), helps developers create UI tests by ensuring all updates related to “units” of interaction are processed and applied to the DOM before making assertions. Previously, act() only supported synchronous functions, but now it’s been improved to support async/await, making it easier to ensure asynchronous updates are done before assertion.
Renaming Unsafe Lifecycle Methods
The React team has finally renamed the unsafe lifecycle methods, prefixing them with UNSAFE_. This change aims to remind developers that code inside these lifecycles may have bugs in future React versions. While the original method names will continue to work in this version, they’ll be removed completely in React 17.
javascript: URLs on Schedule for Removal
Using javascript: inside the href attribute is an obsolete practice that can open security holes in your app. React 17 will remove support for this, so it’s essential to use the React onClick event handler and a button element styled as a link instead.
Deprecating the FactoryComponent Pattern
This obscure code pattern, introduced before Babel became popular, is no longer needed and will be removed in a future major release. If your app uses this pattern, it’s recommended to convert the code to a function or class.
Error Logging for setState Loops
Infinite loops caused by setState in useEffect will now log an error, similar to the error seen when calling setState in componentDidUpdate in a class component.
Fixing Suspense Crash with findDOMNode()
The <React.Suspense> component, used for lazy-loading components, had a crash issue when findDOMNode() was called. This has been fixed in React 16.9, but it’s still important to update your React library to avoid unintentionally triggering this bug.
Get Ready to Update!
React v16.9 is now available on npm. Simply run npm install [email protected] or yarn add [email protected] to update your application. Happy hacking!