What is React Fiber? React Fiber is a re-written React сore algorithm that provides effective work with animation and constantly updated elements on the visible parts of web pages. React Fiber does not bring any changes to the existing React API.
Development using React Fiber is aimed at improving the responsiveness of UI and the overall performance of the application, which is really felt by ordinary users.
In general, this algorithm serves to adapt the work of applications with elements demanding bandwidth (for example, animations) on user devices that cope poorly with large CPU loads. Thanks to React Fiber, we can get the code to a new level of responsiveness to the user's actions, as well as minimize the chance of lags in certain web page blocks.
Why was React Fiber developed?
Facebook began the creation of React Fiber in 2015. The main task was to invent an algorithm that would not just minimize the consumption of system resources to accelerate the application performance, but also apply some intellectual scheme that would create positive results in increased UI responsiveness with decreased user device loads. That is, the goal of the developers was to make possible lags in code execution imperceptible by the user. This is very helpful in developing applications with an abundance of elements and logical structures that respond to user input. The performance of such applications may not increase, but the speed of the response to user actions will.
What do we have as a result? The Facebook team discovered a solution that made it possible to create applications that are as responsive as possible when interacting with users, characterized by the minimum possible UI response time thresholds.
In particular, the processing of touch, as well as animations, should generate feedback very quickly. Let us give an example. The react delays after a button clicks or there is hovering over interface elements for pop-up hints, drawing on the touch panel, etc, and a web page scrolling or animation replay should be between 16 and 150 ms. Search field autofill hints can be implemented with a longer delay; however, this event handling also assumes a period that is not noticeable by the user.
The main task of the developers of React Fiber was as follows: they wanted to create a rational and effective scheduling algorithm designed to construct a certain priority sequence, according to which event handlers in the running application must be started, in turn. For example, the traditional matching algorithm (Stack Reconciler) involves traversing all nodes in the hierarchy of the Virtual DOM tree. What does this mean? In view of the fact that the traditional function calls agreement (through the so-called stack alignment) does not imply pausing, this algorithm does not function optimally, given the large number of updates.
In this case, the standard React core implies a recursive run of the methods contained in the components of the program, which entails performing actions in a completely non-rational sequence. This problem was exactly what needed solving. It was necessary to ensure the partitioning of the program code into separate logical parts, including the possibility of smart prioritization of UI updates. So, the above events (user manipulation, button clicks, and animations visible at this area of the web page) would be given first place in the formed queue, while updates of elements currently beyond the boundaries of the user screen would be performed last.
How does this happen in RF? By installing the task scheduler on top of the single-threaded JS engine. The introduced changes in React Fiber, with respect to the initial matching algorithm, consist of the following:
- Division of the program code into separate logical parts that can be executed independently;
- Task priority management;
- Free transitions between child and parent DOM nodes;
- Possibility to return multiple items from the ReactDOM.render() method; and
- Execution of the following actions after a gradual check of already occurred updates, which reduces the probability of errors.
An application created with the help of RF will not renew the complete DOM tree instead implementing the needed updates gradually, according to predefined priorities. Each time the current update is done, this algorithm checks the compliance with the expected application behavior, and only then proceeds with subsequent ones.
In 2016 a test version of React Fiber was released - a real breakthrough in the mobile applications development.
Description of React Fiber: how does it operate?
As for the basic idea, as mentioned above, Fiber was created in order to improve the work of React-based applications on personal mobile devices with low technical parameters or in networks, the throughput of which leave much to be desired. In order to better understand how RF works, let us review the descriptions of several basic concepts that accompany the architecture of React Fiber.
1. React Fiber rendering. Rendering is a process that maps changes to graphic UI objects in accordance with the model described in the code. Unlike classical algorithm, in the React Fiber the rendering process was divided into two phases:
- Reconcile (revision, coordination). When the reconciliation is executed, the DOM tree is created and a prioritized list of updates is compiled (in fact, they are not performed at this stage). Unlike traditional React negotiation, React Fiber completely rewrites internal reconcile logic and provides instant responsiveness to user input.
- Commit (execution). At this stage, updates are applied to the DOM tree.
In traditional reconciliation algorithm, the redrawing is done bit-by-bit from parent nodes down to the child level. This takes quite a long time, which can make changes in the application graphics discontinuous (i.e., with a frequency of less than 60 FPS, which is the exemplary value of this attribute). That is, the application's braking becomes noticeable for its users. This means that the average reaction time for a normal application must be less than 500 ms.
React implements both platform-dependent (browser-based DOM rendering, for example) and platform-independent user interface visualization tools to display changes. The latter is defined in the diff algorithm. Diff, in turn, works with virtual DOMs describing real DOMs, but they are also "lightweight" JavaScript objects, applying heuristics to find the minimum required number of modifications between two trees. Let us consider it in more detail.
RF simply compares trees by internal nodes. This greatly reduces the total number of steps that are done when the algorithm is executed, thereby reducing the loss in the running application React Fiber performance. This diff algorithm varies from those traditionally used in the development of web applications (for example, in the case of a "horizontal" comparison of two arbitrary virtual DOM tree nodes). The collation, carried out according to the diff concept, is called reconciliation.
Thus, each implementation of this algorithm undergoes three separate steps: creating a virtual DOM, storing it to the stack, and reproducing it on screen in accordance with set user device priorities. In addition, reconciliation involves the use of some additional performance optimization mechanisms. For instance, if you implement such a React property as a context, the context can determine some essence that lies in the deeper nodes of the tree. In this case, performance problems arise. A particular example of this is the application locale switching while the child components are not redrawn. In turn, when a component of one virtual DOM tree in React Fiber is replaced by a component from another tree, the comparison of deeper nodes is no longer performed and the rendering process is immediately implemented.
This algorithm is significantly more beneficial, in comparison with classic recursion. When executed, a new DOM tree is built, compared with the existing, and various components are identified that, according to the automatically assigned priority, are visualized in the user interface.
2. Planning and priorities. The introduction of phases into the alignment algorithm, in conjunction with the partitioning of the program, ensures the increase in web application responsiveness. Capacitive updated elements (in particular, containers with animations) are assigned the highest priority; thus, these events precede all others. After they have been processed, the reconciliation process is implemented and the next highest priority events are chosen, and so on, until all updates are finished. Moreover, in addition to built-in scheduling, the use of React Fiber allows for a reduction in the amount of forwarded data packets and the likelihood of faulty application behavior due to the step-by-step negotiation of each update. As for the standard React algorithm, it's not all rosy in this respect. If a single renderer in your application would fail (throw the exception), then other renderers in the same stack will "drop" together with it. As a result, despite the change in the application state, some components will remain unchanged. In turn, React Fiber introduces the concept of "error boundaries". It describes the behavior of the Fiber algorithm, which ensures that the "fall" of a single DOM tree does not entail the "fall" of others.
Regarding the implementation of planning, for these purposes, React Fiber employs two main functions - requestAnimationFrame() and requestIdleCallback().
Due to prioritization, the completely asynchronous component update process occurs. In particular, this refers to the elements of a page that are not currently displayed on the screen (and can be only seen after scrolling). The advantages of such prioritization are weighty, including smooth graphics and animation with a high framerate per second. Thus, RF allows automating the following task execution:
- Putting the handling of the event on pause to return to it, subsequently;
- Setting priorities for individual application components;
- Displaying the previously received application results; and
- Removing the completed tasks from the virtual stack.
3. Redefinition of the React stack. Fiber employs a special kind of stack, not very originally named ‘fiber.’ The idea was borrowed from OCaml, an industrial programming language, which maximally avoids using low-level stacks. Being an interpretation of the virtual stack, fiber allows storing the prioritized update sequences while turning to them, as needed. React Fiber introduces phases into the matching algorithm. A distinctive feature of React Fiber is the ability to independently manage this virtual stack (that is, the algorithm can automatically suspend the activity of some components and give priority to other components that are more important for the current state of the application). At first glance, this method of working with the stack can negatively influence the user interface in the application. Of course, the stacked data is located in the heap; however, the possible reduction in the application speed is fully compensated by other stack processing methods in RF. For example, the virtual DOM tree splitting into smaller components allows for the creation of several separate stacks (respectively, with differently predefined priorities), thereby demonstrating the notable performance improvements in complex business logic applications. In addition, the results of the performed calculations are not deleted, so they can be used in the future execution of the application code without the need to recheck Virtual DOM nodes.
In practice, this method accelerates reactions of the application by doubling it, on average. That is why the architecture of the React Fiber algorithm is considered very promising. Experts predict the introduction of React Fiber in almost all interactive mobile applications based on React in the nearest future.
What are the practical advantages of React Fiber? Based on the above information, a number of significant advantages that will "accompany" applications based on this algorithm can be singled out:
- Animation playback at at least 60 FPS (with waiting time of no more than 16ms);
- Very fast app reaction to clicks and presses (from 80 to 150ms);
- Quick appearance of autofill tips in search fields;
- Matching of React DOM and React Native;
- Optimization of different priority task execution (in particular, page scrolling);
- A new ‘fiber’ data structure, which is a kind of virtual stack for update ordering (based on predefined priorities); and
- Extensive compatibility (including the previously created React applications).
What are the future prospects for React Fiber development?
According to the official statement from Facebook, the first React Fiber demo will be introduced to the public in the second half of 2017, together with React 16.0; however, the exact release date of React Fiber’s first stable version is not yet announced. You can review the features of this product at the “Is Fiber ready yet” website, which also showcases the results of more than 1500 tests regarding the efficiency of this algorithm. To date, its operation is currently lacking in a single test only - the test of how optimal Fiber is in the process of coding.
Also, good news for web developers is the fact that React Fiber will be backward compatible with existing React applications, and React’s entire public API will stay the same.
How to use React Fiber?
In order to test the efficiency of the current version, the developer simply has to change React DOM to React DOM Fiber. A short React Fiber tutorial can be found at GitHub.
Summary
So, what is innovative about React Fiber, and what is its impact on the user interface? We identified three main advantages:
- React Fiber allows us to create applications that are maximally adapted to the wide adversity of wireless networks and weak hardware. This is due to the proper prioritization of code task execution order, some blocks of which can be suspended in anticipation of more important ones (that is, the redrawing of components, which can be delayed up to or even over a critical point of 500ms, will be preceded by more important interface details such as animations and user actions reaction).
- In the future, RF will allow for better teamwork organization, thanks to the possibility for distributing tasks among several programmers.
- Implementation of Fiber eliminates the need to wait for the whole package to be loaded to perform the rendering.
For these reasons, and more, we can safely say that the future of web application development belongs to React Fiber.
We at applikeysolutions.com are an outsource development company with many years of React Native application development expertise. Contact us today if you have any questions or ideas about React/React Native/React Fiber development, and our experts will gladly help!
