In addition, it is also launching a rewrite of Relay, its framework for building data-heavy applications.
The idea behind React Fiber, the company tells me, is to take what the company has learned from developing React the first time around and put that into an updated framework that is still fully backwards compatible with existing React-based applications. React Fiber, Facebook tells me, will become the foundation of any future improvements and feature development of the React framework.
The main focus here was to make React as responsive as possible, Facebook engineer — and member of the React core team — Ben Alpert told me in an interview earlier this week. “When we develop React, we’re always looking to see how we can help developers build high-quality apps quicker,” he noted. “We want to make it easier to make apps that perform very well and make them responsive.”
In light of this theme, it’s no surprise that the highlights of this new release are built-in primitives for scheduling and incremental rendering. “We want to make sure we render the right stuff at the right time,” Alpert said, and added that “responsiveness was a huge push here.”
But why rewrite React from scratch? “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,” Alpert said. That means the new code was developed from the ground up to be extensible, for example.
Alpert stressed that React Fiber will be backward compatible, though as with all major React updates, there will be a few small breaking changes. The team says it doesn’t anticipate that these will be problematic for developers, though. “We always had a strong API contract, so that gives us the flexibility to reimplement,” he added.
Static queries essentially ensure that complex queries that aren’t altered by runtime conditions can be pre-built and offloaded to Facebook’s servers. So instead of sending complex queries across the network, all an application has to send is a string that identifies the pre-set query and the variables needed to complete it. Related to this, the ahead-of-time optimization feature in the Relay compiler now looks at the query structure to optimize the query that is now stored on the server to execute it faster — and hence return results to the user faster, too. Other new features in React Modern include built-in garbage collection, for example.
For developers who are already using an older version of Relay, Relay Modern comes with a compatibility API.
Facebook says that when its teams switched the Marketplace tab in the Facebook app from Relay to Relay Modern, the time to interaction on Android improved by an average of 900ms. While that doesn’t sound like much, every second on mobile counts, and that’s enough to make an application feel noticeably more responsive than before.