The new React's version was released; Stay updated by exploring the innovations

This article originally appeared on dormoshe.io

Update (26.09): The formal release is out!

React Fiber (beta), the new version of React, is out! 🎉

It was in 2014 when Facebook mentioned that its team is working on a new version of React. Lastly, one of the hallway conversations was about the yearned version of React — v16. In the last three years, a developer group at Facebook has been working on that in order to bring us the brand new things of the front end development. Fiber isn’t just a new version of React. Fiber is a rewrite of the core algorithm. Unlike the rewrite of Angular, Fiber is backward compatible to the “old” React with some small breaking changes, but it can replace the old one easily.

React Fiber is a complete, backward compatible rewrite of the React core — Adam Wolf

The rendering of the SPA with a lot of components and animations is slow sometimes. The significant improvements of Fiber are the faster rendering and the ability to prioritize the elements’ rendering. With this abilities, the tasks scheduling makes the application looks better.

Fiber improves perceived performance and responsiveness for complex React applications — Lin Clark

In this article, we will review the top resources to get update about the new React, explore the highlights of Fiber, cover its architecture and dive deeply into the code base of the changes.

React 16 beta release note & Error handling changes

With the release of React Fiber, the core team published two new posts.
The first is the Github issue by Brian Vaughan, that is the official note about the release. This post contains the installation instructions, JavaScript environment requirements, some new concepts, breaking changes and Known Issues.

The second post is on the Facebook Github pages by Dan Abramov. This post is about Error handling. There are some changes in the Error handling mechanism of React. This post contains an announcement about a few changes of how React handles JavaScript errors inside components. These changes are included in React 16 beta version and will be a part of React 16. Abramov shows the state of error handling in React 15, introduce the Error Boundaries and the new behavior for uncaught errors instead of try/catch. In addition, a live demo is also included.

Facebook firstly announces React Fiber

It is a lit bit awkward, but Facebook didn’t talk much about Fiber until now. In the last April, the F8 conference tooks place in California. F8 is the Facebook Developer conference, and it was the first time Facebook announced about Fiber.

It was not necessarily that the old code base was bad, but we wanted to start with a new foundation that could power everything we do going forward — Ben Alpert

This article is about the announcement of Facebook and its serious intention about the new technology. Facebook already uses Fiber, and these are good news that show us the maturity of Fiber. In addition, they explain why they decided to rewrite the core of React and what was their guidelines.

A cartoon introduction to Fiber

This talk of Lin Clark is from ReactConf 2017 conference. This talk happened in the last March at California. The new React’s algorithm improves responsiveness and perceived performance for complex pages. But to make that happen, the architecture had to be reconsidered from the ground up.

In this popular talk, Clark breaks down the new concepts and explains what makes it seem faster. Clark uses a lot of cartoons to make it more easy to understand. The cartoons make the introduction attractive by visualization of the explanations.

Reconciliation in the React official documentation

One of the best places to learn about a new technology is just to read about it in the official documentation. Mostly, it’s the most updated place to read about the innovations accurately and reliably. In this case, the React’s documentation about the Reconciliation algorithm is explained in details.

React provides a declarative API so that you don’t have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices Facebook made in React’s “diffing” algorithm, so that component updates are predictable while being fast enough for high-performance apps.

React Fiber architecture

This resource’s goal is that after reading it, you will understand Fiber well enough to follow Fiber’s core features implementation, and eventually even be able to contribute back to React. You can read about the differences between Reconciliation and Rendering and why the separation between them is viable.

In addition, it introduces the process of determining when tasks should be performed — Scheduling, what is a fiber and what is its structure. The architecture explained by Andrew Clark from the Facebook’s core team and co-creator of Redux.

A tiny Fiber renderer

This talk of Dustan Kasten is from React London 2017 conference. React is capable of rendering to more environments than the browser. React is actually two separate pieces: core and renderers. ReactDOM, ReactNative, ReactVR are but a few renderers in existence. With the Fiber reconciler rewrite comes an official renderer API. In this talk, Dustan will look at a number of renderers that already exist and implement a React renderer of his own.

A look inside React Fiber — how work will get done

This article published by Korneliusz Caputa and it’s the freshest unofficial resource about the changes. It dives into the internals of Fiber. It gives us a way to understand the code flow and the algorithms by exploring them. The author concentrates on how the processes work from the ground up. One of the article’s goals is to review a few topics that lacked “press coverage”.

The asynchronous work scheduling is the meat and potatoes of Fiber — Korneliusz Caputa

Each React component instance has an updater, that responsible also for the communication between the components and the core processes. This article covers the four main responsibilities of the updater and its relationship with the scheduler. Also, this article dives into other fields like the asynchronous work scheduling, and some important types and constants used in the Fiber codebase in React, by showing code examples.

React Fiber: Try it now

React is an open source. It is available for us in Github (or via npm). So we just need to clone the react repository from Github. Read the code implementation of a product is a good insight for some kinds of developers, but you don’t need to read it all. React’s source code is sprinkled with a lot of error handling, development logging, and performance measurement calls. You can go over the code briefly and explore interesting sections by yourself or just flip through the code.

This article helps you to do the initial operations of cloning, setup and fixing errors in the React’s repository. Besides, there are instructions on how to switch between Fiber and the old implementation.

Conclusion

Facebook didn’t talk much about Fiber until now, but its teams are working hard on new technologies that change the world. There is a hype around React Fiber in the community, and now it’s the time to take it to the next level and dive into the innovation that Fiber brings us. There are still many questions about how it would work in practice. Obviously, many things in the implementation can change by the time. The innovations that React Fiber brings us are crucial for our application, to the user engagement and to the evolution of the web development. It will influence on other frameworks, and about how we design our pages and manage their lifecycle.

You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.