React just received a stable version of its version 18 release; what changes did we get, and how will they affect you?
- React just received a stable version of its version 18 release;
- Many changes will improve the lives of React developers, including Server Components, Suspense improvements, or Concurrent Rendering;
- As with any tool, this one also has its use case. It’s great for some tasks and not optimal for others. Naturally, Facebook’s library is no exception, and it is not without some flaws;
- We still have to wait for a little before all these significant improvements land in stable versions of Vercel’s Next.js or Shopify’s Hydrogen.
React, Facebook’s library for building user interfaces has just received its subsequent significant lifting. There is plenty to be excited about, starting from the new Concurrent Rendering via new hooks and ending with a compiler for React which we may or may not see. There is a lot to unpack, and before we do that, let’s answer a fundamental question: “how hard is it to upgrade.”
The Upgrade
The process is supposed to be straightforward. As much so, the team claims that migrating most apps will not take more than a single afternoon. You can access numerous new functionalities “with minimal or no changes to your application code”. The new functionalities include the all-new Concurrent Rendering. In case you wondered, “[w]e [the React team at Facebook] successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we’ve found that most React components “just work” without additional changes.”
Of course, if you want to use all the new possibilities, you will have to spend some time refactoring. The time investment will be worth it, as you can now control which component updates when, among other features.
Will React 18 Break My Apps?
Short answer: highly unlikely. Long answer: there are times when your app will break, though, again, it is rather improbable.
One of the more common cases of your app not working is the new, stricter Strict Mode. In case anything fails with the upgrade, be sure to check whether your app has it enabled. Even though we know what you’ll think, consider dropping it for some time.
A few breaking changes will make developers shed tears of happiness. React 18 dropped support for Internet Explorer 11, even before the scheduled end of support from Microsoft. While you would expect the bundle size to decrease, it did not. The code is still there, and the team will drop it later. For most of the teams, that is great news. For most, some businesses still need to support Microsoft’s browser: such as the ones working for the UK’s NHS.
Other breaking changes? There are some you need to be aware of:
- Three of them are connected to the new, improved Suspense,
- useEffect is now consistently timed,
- Not only IE 11 fall out of grace: older environments in general did,
With this crucial topic out of the way, let’s get into the details of new features.
React Compiler
React is a kind of library that gives you the building blocks without instructions on how to build something with it efficiently. Some love it, and some hate it: there are countless solutions to the same problems. On the other hand, that also means you might build something without realizing you have just made a horrible mistake or not realizing that your solution is suboptimal.
This is why the engineering team at Facebook is working on an experimental compiler called “React Forget.” On the surface, the concept seems sweet. A compiler taking care of optimization for you? Automatically? How cool is that? The issue is, it’s experimental tech, AND we don’t even know whether it will be released to the public. Moreover, other libraries, such as Vue.js, do all that optimization for you, “free”, AND are faster than React.
React 18 Working Group
Being an open-source project, React has to be in touch with the community, which takes part in the creation of the library. Starting last year, there has been a React 18 Working Group. Compared to the size of the React community, it’s small and invite-only.
It’s great to see the team from React take feedback on board from a “representative” group of developers. After all, the rationale behind the library was to share the project with the outside world to make problem-solving easier for many. On the other hand, one has to wonder whether the wider community did not deserve at least a vote for the working group members. After all, many have committed countless hours to improving the library.
Client and Server Components
This feature here can bring a lot of value effortlessly. Seriously.
If you were using a relatively “clean” version of React, you know very well that you had to bundle many libraries with your code. Transforming markdown to HTML, or rich text to HTML, was something that you often had to do on the client since React is… a client-side library. Not anymore, as Server components are in an alpha stage. You may put heavy code in your server components, thus adding 0 bytes to what your users load. One might even say, that we are now dealing with a full-stack library instead of a hyper-focused front-end one.
Server components will surely decrease bundle sizes across the board and significantly improve the performance of countless websites. Marcin Dąbrowski, ITMAGINATION’s Chief Innovation Officer, agrees, “React’s brand-new Server Components are a great way to reduce the size of your applications.” The only catch is that they are not stable yet, so we would not advise you to use them now. It will come after a minor, 18.x, release. Watch our blog, as we will update you when client components will be ready to use in production. Alternatively, if you are brave enough, you may start hacking now.
Wait for it… Wait for it… Suspense
We have to admit; Suspense is nothing new. It’s an “old” feature introduced in React 16.x. Until now, the functionality was somewhat limited, however. Not anymore.
Suspense lets you show user interfaces faster. Paradoxically, the new feature may allow you to show your components sooner to display a loading state, such as a spinner. Nevertheless, this is a major improvement to the user experience: now your users will at least get some feedback; they will know something is happening behind the scenes. Crucially, your components may now render independently of each other.
Suspense and Server-Side Rendering
Server-side rendering (SSR) is a practice where we render our app on a server before sending everything to a visitor. The approach has several problems, though one phrase summarizes them pretty well: “all or nothing.”
1. The whole page needs to be prepared before we send it;
2. The whole page needs to be sent to the browser before we can show it;
3. The whole page needs to be made interactive before we can have our users interact with it.
As you imagine, that’s not the most efficient approach.
Picture a blog. A blog that we render on the server for the best SEO. At times, some pieces are both lengthy and interactive. Naturally, you want to show your readers the content you have for them as fast as possible. The problem is, until now, the body of the text would block the rest of the piece from showing up. Furthermore, it would then also stop the entire page from being interactive. Not ideal, huh? What if, instead of waiting for one troublemaker, we would first show the title, description, and other parts, while we wait for the actual content to load.
We could even go a step further. First, we show the bare minimum while we are still waiting for the interactive elements to load. Even though that will not be a whole experience, we will keep our readers busy, giving us time to bring the heavy pieces together. The suspense keeps components hydration (adding interactivity) independent.
To illustrate the point for the React audience, React’s team featured Shaundai Person, a senior software engineer at Netflix, on their YouTube channel. The entire video highlighted how much Suspense means for the video streaming platform and other heavier apps. The team at Netflix should know a thing or two about optimizing web apps. By its very nature, VoD platforms are heavy and sluggish, and yet you may make them feel light and snappy. The key is to substitute the more serious bits and pieces with placeholders. Then, as soon as the missing data is ready, your app will provide the whole experience for you.
This pattern enables countless companies to reduce bounce rates, time to interact, and others. It’s of utmost importance that your teams use the new, improved Suspense.
https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fpj5N-Khihgc%3Flist%3DPLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dpj5N-Khihgc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fpj5N-Khihgc%2Fhqdefault.jpg&key=d04bfffea46d4aeda930ec88cc64b87c&type=text%2Fhtml&schema=youtube
Strict Mode Changes
The team at Facebook prepared the app for the future and prepared it for future performance improvements. This is why there is a new, development-only check. Quoting the documentation, “[t]his new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.” For more details, go here.
Automatic Batching
Automatic Batching refers to the automatic batching (grouping) of updates to the state. Currently, multiple state updates will execute more often than in the past. Previously, components would re-render more times than necessary, causing problems and slowdowns. Quoting the documentation, “[t]his is a breaking change, but we expect this to result in less work rendering and better performance in your applications. “
If you want to opt out of the change, you may do so using flushing. As the new mechanism promises to improve performance, we discourage you from doing so.
Please refer to this discussion on GitHub for a deep dive into the topic.
Concurrent Rendering & User Feedback Regarding It
Concurrent rendering is a new way for components to render, bringing many changes for the better. Concurrency is the execution of logic out of order without changing the final result. It’s about dealing with many things at once.
Initially, there was a rumor that “Concurrent Mode” would break your apps, and you will need to rewrite your app because it would not work anymore. As you can easily guess, the community was not too thrilled about it. Luckily, the team behind the project changed their minds, and went for a gradual approach, instead.
Finally, the feature is a powerful new way for React apps to function. What we see is just the beginning, however. The new features will become the new foundation for future improvements as well. To quote the React documentation:
“Concurrent rendering is a powerful new tool in React, and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. But React 18 is just the beginning of what we aim to build on this new foundation.”
React Frameworks: Next, Hydrogen
In case you are wondering whether full-stack frameworks, such as Next.js, are going away, then we have good news for you: they aren’t. It wasn’t even the intention of the developers of Facebook’s open-source libraries to replace them. One of the engineers at Shopify had a chance to speak at React Conf 2021. During the talk, we could find out that the integration of server components and all new features isn’t where it needs to be for universal adoption.
Same with Next.js: React 18’s server components, or React 18’s “Streaming” capabilities, are in alpha, and it would take a brave team to start using them in production. On the other hand, there is a saying that fortune favors the brave.
If you can make the new features work and afford occasional breakdowns, then make sure your business upgrades to the latest version. Version 18 is worth it.
React 18 Critique
We could not be considered objective if we did not list at least a few of the common critiques of React and its new version.
For one, what started as a small library, turned into a behemoth, which now also includes some full-stack capabilities (!). People like to make fun of Angular (including the author of the text), but at the very least it goes in one direction, and it stays there. It was supposed to be a gigantic framework for corporate apps, and it is just that.
Secondly, new hooks introduce more complexity into an already complex-despite-looking-simplistic React. Furthermore, we (often) can’t write regular JavaScript anymore. Typically, instead of writing just whatever we want, we have to go ahead and wrap everything in several hooks to ensure we do everything the “optimal” way. That might introduce some subtle bugs that are hard to track and more. For some who love hooks and cannot get enough of them, please take a look at the “React Forget” video. As an alternative, for people who do mind optimizing everything manually, check out Vue.js. It optimizes under the hood, freeing you to do the actual job. You can write jsx with it as well.
Lastly, React is becoming a black box. There are some issues about the library that devs don’t understand or think they know, and then it blows up in their faces. Don’t take it from me, take it from Jared Palmer and his article … from 2019.
If these points discourage you from using React, feel free to schedule a “no hidden catch, no strings attached” consultation with one of our architects for possible alternatives and whether Facebook’s library is the right fit.
Summary
React is, undoubtedly, the ruler of the current web. Of course, it is not without flaws, and some points that the critics raise are obviously valid. No library is without fault, however. In the same way as life, programming is the art of making trade-offs. The question is whether you are making the right ones. The majority of modern-day web developers tend to agree.
It’s no wonder that the entirely new industry, Web3, picked Facebook’s library to be its powerhouse. No matter the industry, it’s the default choice for most companies building new products. We may go even further: React Native, based on React, is an excellent choice for those building cross-platform mobile apps.
The new version, version 18.0.0, will make new (and old) apps feel more snappy: only if the teams apply the aforementioned new features correctly. We might also load less JavaScript on countless websites and be able to interact with content much more quicker. All thanks to the improvements coming from React 18 and all thanks to the gradual adoption approach.