React.js in 2019 & Beyond

React.js is one of the most important frontend libraries you can use in modern JavaScript development. It enables you to build highly reactive user interfaces that provide a fast and mobile-app-like user experience.

As a developer, when working with React, you focus on build components in a declarative way (i.e. you define how it should look like, not how it should get there) and React will take care about the rest. You can rely on its fast and optimized internal rendering mechanism and therefore offer your users a great experience.

That's the present - but what can we expect in the future? Will React stay important? Or should you learn Angular or Vue instead? Time to take a look!

React.js is very popular - for a good reason. It's a lean library that gives you all the tools you need to create modern user interfaces by building re-usable components.

It's fast, well-documented, in high demand and actively maintained by Facebook. It has a vibrant ecosystem and community.

React is focused on doing one thing right: It allows you (i.e. the developer) to build components in a declarative way.

Like this:

import React, { useState } from 'react'

const InfoBox = props => {
  const [isVisible, setIsVisible] = useState(true)
  return (
    <div className="info-box">
      <button onClick={() => setIsVisible(false)}>Close</button>
      <p>{props.message}</p>
    </div>
  )
}

This short snippet could render a closeable infobox into the real DOM.

And you as a developer don't need to write any code that is involved with the actual rendering (e.g. appending any elements to other elements in the DOM). You only define the end result you want to have and React does the rest.

To sum it up: The biggest strength of React.js is that it's a highly focused, lean and efficient library.

As always in life - there is room for improvement. Maybe.

As mentioned, React.js really only knows how to do one job: Render components.

Modern frontends require more than that though. You need some routing solution if you plan to create a single page application (SPA). For state management, you'll also need some help once your app reaches a certain size. React.js does offer built-in solutions but especially the Context API might not be perfect in all scenarios.

It's a design decision that React "misses" such features.

Unlike Angular or Vue, it's not a framework that tries to give you a complete toolkit for building frontend user interfaces. Instead, it's really just a library for building components.

It's really up to you whether you see this as an advantage or disadvantage.

Potential disadvantages of this focus would be:

• Maintainance of third-party packages (e.g. for routing) might be less reliable than "official support"

• Third-party packages might not always be up-to-date or use latest library features

• New features might break third-party libraries

In 2019, one huge change did already happen: React Hooks were added to React (they were introduced/ announced in 2018 already).

React Hooks are really an important change because they will very likely influence how we build React components in the future.

Historically, you could choose between class-based components (will still be supported by the way!) and function components. And you always needed class-based components if internal component state or lifecycle methods were required.

With React Hooks, everything can be a function component and hence you will never have to re-write entire components again. At least not just because you suddenly need to manage some state.

React Hooks also allow for brand-new patterns - e.g. sharing stateful logic between components (see my linked article).

This makes React Hooks an exciting technology. Whilst you should still also learn about class-based components (you will very likely encounter them in your next job), the future of React will be (partly) shaped by React Hooks. Of course my React course already includes them!

But React Hooks are not the only thing happening to React in 2019.

We'll also see the addition of Suspense for Data Fetching and Concurrent Mode.

Loosely speaken, both features have the goal to optimize the rendering process to provide a faster, more responsive and "better feeling" user experience.

The way you write React components/ apps will probably not change as drastically as it does because of Hooks but these features will do a lot of important "behind-the-scenes" (and also some "in-front-of-the-scenes") stuff.

No official announcements have been made about 2020 as of now.

But we'll very likely see more improvements to the rendering efficiency and process in general.

I wouldn't expect major new features for the moment, though the removal of some deprecated features (e.g. old lifecycle hooks) as well as the deprecation of some current features (maybe class-based components) is definitely possible.

We'll most definitely not see an official React router or anything like that though. This weakness (or strength?) will persist.

React.js is already extrmely popular.

Its popularity has constantly risen over the past years and I see absolutely no reason why that should change.

It will keep its focus on being a library for component-based UI creation - with all its strengths and weaknesses.

The future of React.js is very bright in my opinion - the biggest challenge might be that the transition from class-based to function components (with React Hooks) is managed elegantly. And that React doesn't get bloated with too many new (behind the scenes) features without removing old/ deprecated features.