--- title: "July 2022 Frontend Updates: React 18 Optimizations, the JavaScript Proxy Object and ECMAScript 2022" slug: july-2022-frontend-updates url: /ideas/july-2022-frontend-updates/ subtitle: This month, the Whitespectre Frontend Team covers the newest React 18 features and hooks to optimize performance, the Proxy object in JavaScript and the new ECMAScript 2022 specification. publishDate: 2022-07-26 image: /images/builder/6ffcebdf26e744628a6023e8a19676ed.jpg authorName: The Whitespectre Engineering Team authorImage: /images/builder/0021b06f92f340129c2faf7760b194b1.png --- This month we cover: * [Performance Optimizations in React 18](#performance-optimizations-in-react-18) * [The JavaScript Proxy Object](#the-javascript-proxy-object) * [ECMAScript 2022](#ecmascript-2022) #### Performance Optimizations in React 18 This is [not the first time we speak about React 18](https://www.whitespectre.com/ideas/february-2022-frontend-updates/#react-18), the out-of-the-box performance improvements it brought and what it was get to know as the new “Concurrent Features”. But did you know how to use those to get the best performance out of your application? Two of the most interesting Concurrent Features are the new `useTransition()` and `useDeferredValue()` hooks, and this is how they help you optimize performance: ###### [**useTransition()**](https://reactjs.org/docs/hooks-reference.html#usetransition) By default, React tries to render after updating all states, i.e., batches the updates and then renders the UI with all changes at once. That’s the desirable behavior most of the time, but when some of those updates take much longer than others, they could totally block UI rendering even if the faster updates are ready. With `useTransition()`, you can prioritize urgent state updates over the non-urgent ones. That way, React will know it shouldn’t wait for those slower, non-urgent updates and will render the urgent ones immediately, rendering again when the slower updates finish. This way, the UI won’t get frozen by the slowest operations, improving the perceived responsiveness of the application. ###### [**useDeferredValue()**](https://reactjs.org/docs/hooks-reference.html#usedeferredvalue) This hook does the same job as `useTransition()`, but it’s used when we only need the value and don’t have the state setting function. It tells React that the state update for that value is non-urgent, so it will defer to more urgent updates. If an urgent render occurs, the component will render with the previous value and then render again when the actual state update occurs. Want to know more? [In dev.to they wrote an interesting article](https://dev.to/samaghapour/performance-optimization-tips-for-react-projects-4mj) with examples and a more in depth explanation of these features, plus some other optimization tricks with `lazy()` and or with the good old `useMemo()` and `useCallback()` hooks. Remember that in order to use the new Concurrent Features, you must be on React 18 and use the new [Root API](https://github.com/reactwg/react-18/discussions/5). #### The JavaScript Proxy Object The JavaScript [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) wraps another object and intercepts fundamental operations, like property read/write or object construction, allowing you to handle them transparently. It’s not a new feature by any means (we had it since ES6), but it’s not always well known, cause it’s not easy to find use cases for it outside library development, and browser support wasn’t great either. Now that [it has widespread browser support](https://caniuse.com/proxy), it is a good time to remember how awesome proxies are. If you want to learn more about them, in dev.to they recently wrote a couple of articles: * [JavaScript Proxy, a first introduction](https://dev.to/dailydevtips1/javascript-proxy-a-first-introduction-4hgf) * [Detect object changes with JavaScript Proxy](https://dev.to/dailydevtips1/detect-object-changes-with-javascript-proxy-1o5g) #### ECMAScript 2022 ECMAScript (or ES) is the standard that rules the language that we know as JavaScript. It’s published by the nonprofit standards organization [Ecma International](https://www.ecma-international.org), and [they have just approved the last version of the specification:](https://www.ecma-international.org/news/ecma-international-approves-new-standards-6)[ECMAScript 2022 or ES13](https://www.ecma-international.org/publications-and-standards/standards/ecma-262). These are the new features it incorporates: * Public, private and static class members * Private member checks with the `in` operator * Static initialization blocks * Top-level await in modules * The `error.cause` reference in `Error` class * Method `at()` for indexable values (like arrays or strings) * RegExp match indices * `Object.hasOwn(obj, propKey)` Fortunately, browsers are catching up with standards pretty quickly nowadays and many of these new features already have over 90% of support relative to the global browser share. But anyway, you can start using them today with transpilers like [Babel](https://babeljs.io) and the [core-js](https://www.npmjs.com/package/core-js) polyfills. If you want to know more about each one, [Axel Rauschmayer](https://twitter.com/rauschma) wrote a post in his blog with plenty of examples. [Check it out!](https://2ality.com/2022/06/ecmascript-2022.html) * * * Anything you’d like to add? Think there is something missing? Ping us on [@whitespectrehq](https://twitter.com/whitespectrehq) or [LinkedIn](https://www.linkedin.com/company/whitespectre), we’d love to read your feedback!