July 2022 Frontend Updates: React 18 Optimizations, the JavaScript Proxy Object and ECMAScript 2022

This month we cover:

Performance Optimizations in React 18
The JavaScript Proxy Object
ECMAScript 2022

Performance Optimizations in React 18

This is not the first time we speak about 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()

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()

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 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.

The JavaScript Proxy Object

The JavaScript Proxy object 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, 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:

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, and they have just approved the last version of the specification:ECMAScript 2022 or ES13. 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 and the core-js polyfills.

If you want to know more about each one, Axel Rauschmayer wrote a post in his blog with plenty of examples. Check it out!

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!