What You Should Definitely Look Out For In React In 2022

The year 2022 has just started and there are a lot of exciting things on the radar if you’re a React developer. Whether it is things that are already released or that still have to come, there are a lot of things to look forward to. It definitely won’t be a boring year in the world of React development and I’m personally speaking more than excited for everything we know that 2022 will for sure bring. This article will go over these topics that I think will either make a big impact on the field of React development or concepts that every React developer should look out for this year.

Remix

Teased for a very long time, Remix was finally officially open-sourced at the end of 2021. Supported by some of the greatest names that the field has to offer, Remix markets itself as a self-proclaimed full-stack web framework based on web fundamentals with a modern user experience as a focus.

At the core of Remix stand concepts like performance, progressive enhancement, nested routes, parallel data loading, customizable levels of error handling, and per-route CSS loading and unloading. For any frontend developer, Remix will be like a box of chocolates waiting to be unpacked. And 2022 will be the year for that.

To learn more about Remix or to get started with it, I recommend checking out their v1 blog announcement that will point you in all the good directions.

Server-Side Rendering

One of the most exciting things on the way in the realm of React is React 18. It includes tons of new features, APIs, and much more. But one of the most important aspects is the added focus on server-side rendering and all the out-of-the-box possibilities.

Although it’s already possible to have server-side rendering using different frameworks like Next.js and Gatsby, the out-of-the-box support from React’s side has always been limited. But with the addition of features like Suspense, HTML streaming, and selective hydration, a world of opportunities will open up.

The length of this paragraph is definitely not reflective of how excited I am about this, but diving deeper into this topic will warrant an entire article on its own. If you’re not sure about what server-side rendering means, what the difference is with client-side rendering, or what the above features mean, now is the time to investigate them in preparation for React 18!

Concurrent Rendering

If you thought that there would only be one big topic as part of React 18, then the React team has a very pleasant surprise for you. Another very exciting feature coming in the next version of React is the so-called concurrent rendering mechanism.

To give you a very brief summary of what concurrent rendering is: one of the issues with React in its current form is that all state updates are synchronous. This means that React has to handle them one by one, finishing the current one before being able to pick up a new one. For a lot of cases, this is perfectly fine. But when certain updates have more priority or urgency than others, this can become a problem.

This is where concurrent rendering comes in. It allows React to handle multiple updates at once. However, this doesn’t mean that React will perform several state updates at once. Rather, it can decide to pause the current state update that it’s working on and pick up a different one that is more urgent. Later, React can decide to resume the paused state update or drop it altogether.

Honestly speaking, this is by far the thing that I’m looking forward to the most in 2022. Concurrent rendering opens up an entirely new world of possibilities for React developers to improve the real and perceived performance of their frontend applications. It allows us to approach React in a totally different way and forces us to change the way we currently think about rendering flows.

To learn more about anything related to concurrent rendering, I recommend checking out the React 18 announcement. It includes everything necessary to get started with understanding concurrent rendering, like the concepts behind it and how to opt into it. In fact, concurrent rendering is not a single feature but will come as a set of APIs that will allow React developers to opt different parts of their application into concurrent rendering.

Behaviour Testing

In the field of React, we have seen a significant shift in the way components are tested over the past years. While previously it was mainly focused on unit tests, the current focus is more orientated towards making sure your tests are as representative as possible of the experience of your users — behaviour testing.

Right now, behaviour testing has become the industry standard for testing in React development. With an ever-increasing adoption rate, the popularity of React Testing Library, and even being mentioned in the official React documentation, it’s unlikely that behaviour testing will leave the scene soon.

Even if you’re not using React Testing Library, it’s possible to adopt behaviour testing as a concept. In practice, behaviour testing is not tied to any framework or library. With the proper approach and thoughtfulness, you’ll be able to write behaviour tests using Enzyme, Jest, Mocha, and so on. As a React developer, implementing proper behaviour testing will be an invaluable and essential tool in your skillset.

Honourable Mentions

While the above-mentioned topics are very exciting, big, and relatively unknown topics for a lot of React developers, there are also a few others that deserve honourable mention. These technologies are still very worthwhile to look out for in 2022 but have been on the scene for quite some time already. Therefore, the chances are higher that you’ll have encountered them or worked with them if you’ve been in the React development field.

No list of React topics would be complete without including TypeScript. As one of React’s most iconic partners, it’s very difficult nowadays to imagine any medium-sized or larger React project existing without it. The differences between a React project with TypeScript and without are significant. Not only does it remove an enormous amount of ambiguity from JavaScript, but it also tremendously impacts the maintainability, scalability, safety, and organisation of the code project. If you haven’t added TypeScript to your skillset as a React developer, then 2022 is definitely the year to do so.

If you’ve done React development for a long time already, it’s likely that you’ve heard about the terms “design system” or “component-driven development. And if you’ve ever looked into either of those, it’s extremely likely that you’ve come across Storybook. The open-source tool has become a staple for structured and reusable UI development. But even with its current popularity, the awesome team behind Storybook aren’t slowing down anytime soon. With active maintenance and mind-blowing features in every release, Storybook is a tool always worth looking into if you haven’t yet.

Final Thoughts

Even after so many years, the field of React development still has a lot to offer. Whether you’re a seasoned veteran or a newcomer to the game, there are always things to look out for in the world of React.

Looking ahead, I’m extremely excited for 2022 and everything it will bring to us in terms of new technologies and concepts. The introduction of Remix will really shake up the way we approach frontend development and the field of React frameworks. React 18 will make it so much easier to implement a staple part of web development in server-side rendering, while also introducing an entirely new way to optimize the performance of frontend applications in the form of concurrent rendering.

And if those weren’t enough to get you excited, there is also still an entire world to explore for behaviour testing as it’s cementing itself as a testing standard, TypeScript as an essential tool for maintaining React projects of any size, and Storybook as a core tool to fuel structured UI development and collaboration with design.