Hot React topics of 2019

React is loved by developers. According to the latest StackOverflow survey, it has become both the most wanted, and most loved framework. React stands head and shoulders above other popular frameworks like Vue and Angular.

Early 2019 has blessed the React community with a number of pleasant changes, promising good fortune for the library well into the year and beyond. We have now entered a new age of React with features like the long-awaited logic-enhancing hooks and suspense that enables code split, which allow developers to handle React apps in a whole new way.

The current state of React is the fruit of a huge effort by its creator, Facebook, and the community around it over the last few years. According to npm trends, React downloads exceed those of other popular frameworks by a good margin, and React is also doing well in an overall comparison. For huge sites such as Airbnb, PayPal and Netflix, React has been a go-to choice.

You can see React everywhere from browsers to app stores, from the screens of smart TVs all the way to VR.

A strong community creates great events

The React community consists of millions of active developers. They provide examples and learning materials, organize meetups and conferences and make it easy for anyone to jump on the React train. On GitHub, React has close to 1,300 contributors, which is significantly more than any other similar library or framework.

This spring, we visited two major React conferences: React Amsterdam and React Finland. React Amsterdam is one of the biggest conferences about React and React Native in the world and the biggest one in Europe. At React Finland, we saw a great combination of Finnish React community and international flavor.

The talks themselves covered a broad range of topics and were broadcast on Youtube from both React Finland and React Amsterdam.

Based on these conferences and our own findings, we – Ville Pelkonen, Samuli Laine, Milos Berka and Alex Fomushkin – listed the hottest and most interesting React topics of 2019.

Key improvements in React Native

React Native is getting more mature with every release, but there are still core issues and obstacles it needs to overcome to become more compelling to a wider range of users. The framework is going through a massive under-the-hood rework to improve performance and help developers handle the native side of things. As we have written before, React Native is the best option, at least sometimes.

Facebook and the RN community are currently working to decrease the size of React Native itself by utilizing a Lean Code approach. This means they’re moving optional components out of the core library and into separate repositories to be maintained by the react-native community, providing possibilities for increased community involvement and contribution.

Removing things that every project might not need, like ImageStore or push notifications, from the core allows for greater adaptability to the needs of individual projects. In many cases, this will decrease the size of projects built using React Native.

The first steps have already been taken in the latest releases, which have also brought performance improvements, 64-bit Android support, faster app launches and improved command line tools. As a welcome change for React Native developers working on big, long-term projects, new and improved React Native updating tools will make our lives even easier and customers even happier.

What’s more, Microsoft has announced React Native for Windows, which will provide React Native developers with Windows 10 SDK support within the existing toolset, wrapping up their Windows mobile endeavors for good.

TypeScript: still controversial but starting to look good

Having been steadily gaining in popularity within and beyond the JavaScript community over the last few years, TypeScript was naturally a topic that came up frequently at React Finland.

It’s still a slightly controversial subject, with many debating the pros and cons of making the switch. However, the general consensus seems to be shifting in TypeScript’s favor, fueled in part by increased TS support in developer tools like VSCode.

Kadi Kraman held a talk at React Finland that nicely summed up the debate. She went through the fundamentals of static typing and JavaScript and the relationship between them, weighing the arguments for and against applying static typing to dynamically typed JS.

Initially, writing an application in plain JS may be faster and less repetitive compared to statically typed languages. However, the added constraints of the latter encourage more understandable and robust code, and will likely result in fewer errors discovered after shipping the product.

Facebook’s Flow and Microsoft’s TypeScript compared

When going into the methods of integrating static typing into a JS project, Kadi focused on two of the most popular tools for the job: Facebook’s Flow and Microsoft’s TypeScript. In essence, they are totally different approaches to the same problem. Flow is a static type checker and TypeScript an actual language that compiles to JS, and neither is objectively better than the other.

In the end, the comparison ended in favor of TypeScript due to its larger community, more frequent releases and better reliability. Today, TypeScript also features most of the functionality that it used to lack in comparison to Flow.

Server-Side Rendering

Other than best-practice discussions and general new feature buzz, one of the cool topics at React Amsterdam was Server-Side Rendering (SSR) with React. More specifically, how far frameworks such as next.js have come. Next.js has only been out for 2 years, but can be found on more than fifteen thousand sites, including giants like Twitch, Netflix and Hulu.

The benefits of SSR include fast Time to Interactive (TTI) by offloading computation to a server. Next.js takes this to the next level by making it possible to preload initial data. Preloading reduces the number of round trips needed to view the site, which is especially important with weak connections, often occurring with mobile devices.

SSR brings a more mature solution to SEO

The second big benefit of SSR is Search Engine Optimization (SEO). SSR guarantees that your site is easily indexable by search engines. While SEO can be achieved with pre-rendering on the client side (Gatsby, react-static, etc.), SSR is a more mature solution in that regard.

Tim Neutkens (Zeit) gave a nice overall introduction to next.js, while Max Stoiber (Github UK) mentioned that not using next.js was one of the biggest tech regrets in the creation of Spectrum.

Design systems in React

Many developers around the world already see the benefits of structuring their web and mobile applications around components. React supports the idea of functional programming, allowing a great level of component reusability and logic encapsulation.

When every UI element in an app can be separated and reused multiple times across the app, it achieves a fantastic level of adjustability in terms of look and feel, while making it easier to maintain a coherent UI. It makes the implementation of a structured and organized style guide practically effortless.

Both React and React Native are constantly gaining better design systems support through third-party tools like Storybook. Such tools help visualize every state or variant of any component/feature, whether buttons or entire screens/pages and the navigation between them. After adding a set of design tokens such as colors, spacing and typography, you have a barebones Design System.

Combined with React’s component-based ideology, it allows you to expand your Design System to the other apps of your brand, both on the web and mobile. This helps with solving one of the biggest design challenges: maintaining a consistent brand across multiple products and platforms.

Image: React Amsterdam