selbekk

Posted on Dec 31, 2019 • Updated on Mar 6, 2020 • Originally published at blogg.bekk.no

A Year of React - 2019 in Review

#react #javascript #webdev #reactnative

Written in collaboration with Caroline Odden and Jonas Løchsen. This post was first published at blogg.bekk.no (in Norwegian), where we also publish weekly React summaries called <ForrigeUke />.

This was a great year for Greta, and a terrible year for Trump. But the real winner this year was React, and its amazing community of developers, advocates and regular ol' users.

There was a lot that happened in 2019. We've spent every Monday night giving you a short summary of all the big and small news stories in this community we all love and cherish. Some of those stories were a bit bigger than the others.

In this post, we'll go through the year, highlighting some of the biggest new features and news stories of 2019. To finish it off, we've also found the recordings from some of our favorite React conferences!

Hooks

After a few months of eager waiting, React 16.8 finally brought the feature we'd been waiting for - Hooks - to a stable release.

It was at ReactConf 2018 the React Core team let us know they were working on new functionality that was supposed to improve our React quality of life considerably. The proposal was named hooks, and gave us great tools to handle both state and side effects in function components.

If you didn't catch the initial talk, you can (and should!) see it here:

Oh, and here's the introductory blog post, too!

We also wrote a post about what we thought about hooks (in Norwegian), if you want to give that a shot. 🤘

React Native gets hooks, too!

The week after Hooks were launched for the web, React Native followed suit. The 0.59 version included full hooks support, and had all of React Native Twitter freaking out 🙌

React Router 5

This was such a great release - completely without breaking changes! Well - almost. The only reason they had to bump their major version was the way they handled their dependencies in react-router-dom.

It might have been in violation with the rules of semantic versioning, but whatever 🤭 Here's the release blog post if you want to read more about it!

But it wasn't all screw-ups - this version brought React 16 compability, no more <StrictMode /> warnings, support for an array of paths, and lots more.

Create React App v3

The third major version of create-react-app came with a bunch of new cool stuff, including "rules of hooks" eslint support, TypeScript linting and absolute imports.

You can read the complete changelog here.

Hot Reloading 2.0: Fast Refresh

Hot reloading is simultaneously the best and the worst feature of the React developer experience. It's just amazing to see your components update automatically on save, while keeping the component state. It lets us iterate quicker than on any other platform I know of! At the same time, it has a tendency to not work like half the time, and it can be a nightmare to get working in the first place.

Most of the reason the developer experience has been both good and bad is that it was a feature implemented in user land. To fix this, the React team has stepped up and implemented a much more stable implementation that works in both React and React Native.

It's already available for React Native, and support for the web is just weeks away. If you're using Parcel, you can start using it in the newer alpha releases, and Webpack has an open pull request for adding support.

This means we'll probably get it in create-react-app as well! We're very excited.

React Router and Reach Router join forces

Routing is something most React apps use in some way, and lately there has been two major players out there. React Router has been the defacto choice for a long time, but ever since Gatsby started using the competitor Reach Router, we suddenly have a choice to make when it comes to routing. At least until next year.

On the Norwegian national day, May 17th, Reach Router king (and React Router founder) Ryan Florence proclaimed that the two libraries are merging into one!

You can read all the details here, but in short, we'll see more hooks, less libraries (Reach Router is being deprecated), and a common API moving forward. We've already noticed some of this work with the new hooks introduced in react-router@5.1.0, and we can't want to see what's in store.

Speaking of mergers - perhaps we'll see more of those moving forward? In the CSS-in-JS world, Styled Components and Emotion is starting to look veeery similar API-wise! 🤔

New DevTools

After teasing us throughout the year, Brian Vaughn was very proud when he finally revealed the completely rewritten version of React DevTools this August. This rewrite brought hooks support, improved performance for large applications and a much better user experience.

As far as we can tell from his Twitter account, however, Brian Vaughn isn't done implementing new features yet. Version 4.3 is already on its way!

React Gate

While most of the big names in React were hanging out at React Rally, a pretty nasty Twitter incident happened. What was later known as "React Gate" was a large, distributed argument about the more toxic and racist parts of our community. Racism and social exclusion were discussed in a very vocal and polarizing way, and a lot of people excused themselves from Twitter for an extended period of time. Ugh.

There are great recaps out there that summarizes the entire debacle, and we wrote about it in two of our blog posts.

The aftermath wasn't all bad though. On the contrary - some very actionable positive things came from it! The React team has increased their focus on including marginalized groups in tech, and implemented the Contributor Covenant Code of Conduct. Many of the people included in the React Gate episode has later taken on stronger roles in the community, trying to include good folks and shut down the trolls, racists and misogynists. That's what I call a happy ending.

Concurrent Mode

The big event of this fall was ReactConf in Henderson, Nevada, and it was a really nice one. The biggest news was the introduction of Concurrent Mode - which is now available in the experimental release channel of React.

Please note, however, that it's still very much experimental, and not available in any stable release. If you're trying to dig into the APIs to be a bit in front when they are published, however, you should dig right in.

To quote the extensive documentation, Concurrent Mode is

a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

This sounds wonderful! The React team has provided us with an amazing developer experience as they have iterated on their product, but this feature is a bit different. It's about the end user experience - and making it as smooth as possible. We're really digging that direction!

Concurrent Mode opens up a new world of possibilities. As the name hints, it lets us render several things concurrently, and even pause rendering certain elements if a higher priority task comes along. All of this plays together to make your app seem as smooth as possible.

Harry Wolff has written an amazing summary on why Concurrent Mode is the bees knees, and explains himself with a bunch of great examples.

He even touches on whether you need to deal with Concurrent Mode. The answer is - as with most new and more advanced React features - no, but it's a huge win for your users if you do. It's a powerful tool that gives you the opportunity to control how your apps is handling asynchronous tasks and rendering your UI - if you have the time and resources, of course.

Suspense for data fetching

Since React 16.6, React's new Suspense feature has given you the opportunity to delay rendering of your components while you wait for parts of your application to load, and render a loader instead. With the aforementioned Concurrent Mode, we also get this feature for fetching data, images and basically whatever you want!

You can read all about in the docs (note - this is still experimental!)

As with anything that's new and shiny, it might be a bit hard to understand how it all fits together. Luckily for us, Maggie Appleton has made an amazing illustrated guide to both Suspense, how it works, and how to use it:

Another way to understand what problem this new feature solves for us, we also suggest that you have a closer look at this Twitter thread from Dan Abramov. He identifies what the problems with today's solutions are, and pin points how Suspense comes in to save the day.

Create React App gets templates

In December the 3.3.0 version of the offical React bootstrapping CLI create-react-app dropped, and it contained a few very cool features.

First of all, it now supports the concept of custom templates. That is, the files and dependencies that are included when you bootstrap a new project!

This is a great feature for products like CodeSandbox, since it gives them the opportunity to create much more flexible templates for their users. CodeSandbox even launched what they call their Template Universe, which promises to improve project startup times.

The other great feature in this new Create React App version is the support for the two new language features in JavaScript - optional chaining and nullish coalescing operators.

In addition, react-testing-library is included by default. This wonderful library is a must-have for any project anyways, so I'm glad they decided to include it for all projects.

For a complete list of new features, we'd refer you to the changelog here.

Redux Style Guide

If you reading this, there's a high probability that you've touched Redux at one point or another. If you haven't - Redux used to be the must-have application state handling library for any new React app.

Redux has lost much of its glory in the last year, mostly due to improvements in React itself. Many people used Redux as their global store, but with the new Context API and introduction of hooks, solving that problem yourself became almost trivial. In addition, Redux introduced a lot of boiler plate in places where it didn't seem necessary.

That being said, Redux is still a great tool for complex applications, and - much more important - is probably a part of the tech stack of the legacy app you're stuck maintaining.

Since Redux probably isn't going anywhere in the foreseeable future - not from the React ecosystem, and not from your app - it's important to use it the best way possible. That's why Mark Erikson and his crew of maintainers has written a very detailed and useful list of recommendations on how you should do things "the Redux way". It includes a set of rules they've split into three sections - essentials, highly recommended, and optional.

Follow these, and you'll end up with smaller, simpler code with less bugs, and a simpler way to onboard new developers.

Some of our favorite conferences

In addition to all the new features, libraries and news stories we've stumbled across the last couple of months, we've noticed there has been a ton of React related conferences! We've summarized both React Conf and JSConf (both in Norwegian), but here's a quick overview over all the biggest conferences related to React, and where you can find all the talks. There's no particular order here 🤷‍♂️

Speaking of conferences - you can find a very complete list of both conferences and meetups related to React on React's website!

ReactJS Girls Conf

There was a lot of butts hurt when am all-female speaker React conference was announced. What a silly thing to be pissed off about. The conference was amazing, with incredible talks, exciting speakers and supposedly a really nice experience for those that attended.