Sign up to the Newsletter
We'll keep in touch!
We'll keep in touch!
Fiber is a complete rewrite of React’s core, aimed at improving UI responsiveness and perceived performance for end-users. Even though React is a convenient framework for developers, it is the users and their experience from using the app that counts the most - and sometimes, especially on lower-end devices, React apps can simply seem slow for them. React Fiber aims to improve this situation by rethinking how and when the user interface should be updated, ultimately making your apps seem much faster and more responsive to users.
Before we jump into details on how this is done, here are some key facts about React Fiber:
“(React Fiber) improves perceived performance and responsiveness for complex react applications” - Lin Clark during React Conf 2017
First and foremost - with Fiber, the React team did not aim to make the framework faster but to improve what makes the user interface feel smooth and responsive. Depending on the way the user interacts with an app, there is a certain threshold to UI response time above which the app seems slow:
The main performance-related issue that the React team set out to tackle with Fiber is scheduling - that is, determining when computations should be performed. In client-side frameworks like React, recursive calls to component lifecycle methods can block the browser’s main thread, leading to laggy UI performance. To solve this problem, two things can be done:
You may already know that depending on the underlying platform, React uses different renderers to display UI elements, such as the DOM renderer for browsers, or the Native renderer for mobile apps. However, there is some platform-independent logic shared between all renderers that takes care of computing which parts of a UI tree need to be changed (also known as “diffing”) - this common part is called the reconciler. React Fiber reimplements the reconciler using data structures called fibers to keep track of where it is in the tree.
In React Fiber, the rendering process has been split into two phases:
The reconciliation phase can be interrupted to let the browser’s main thread do its work with the help of a relatively new browser API called requestIdleCallback. This allows the main thread to notify React when it has spare processing time. For older browsers, React includes a polyfill of the requestIdleCallback API, so compatibility shouldn’t be an issue. This API is also implemented in React Native, so native mobile apps can benefit from Fiber’s scheduling improvements as well.
In addition to breaking up work into smaller pieces, which makes React more responsive to browser events, Fiber assigns different priorities to different types of UI updates - those more critical to the perceived performance. UI updates such as animations are assigned higher priority and can pause other in-progress updates. The higher-priority update is then reconciled and committed, after which the lower-priority ones continue, reusing previously completed work if possible.
Apart from built-in scheduling, React Fiber brings smaller bundle sizes, better codebase approachability thanks to Flow typing, better error boundaries, more descriptive errors, and the ability to return arrays and strings from render functions.
Fiber, which will be introduced in React 16.0, will be backwards-compatible with existing React apps. Despite the fact it is a complete rewrite, public APIs will stay the same. You can check React Fiber’s status on http://isfiberreadyyet.com/ - event though it is still not 100% ready, it is already being used by Facebook on their main page.
Sign up for our newsletter to receive updates about Ruby, Rails, IoT and software development world.
Every newsletter is created to provide a real value to our subscribers
June 8, 2017