React Fiber - alexanderteplov/computer-science GitHub Wiki

React Fiber Architecture

Starting from React v16.0 Reconciliation algorithm based on Fiber Architecture.

Fibers, are simply the new form of JavaScript objects, representing React Components. Most probably they are sort of wrappers around React Components with some additional features like fiber type, fiber priority and others.

To deal with fibers React teams reimplements sort of browser call stack inside React engine. This allows React to control the orders of execution of fibers, schedule, delay and continue them.

React prioritized fibers and according to priority may use requestAnimationFrame or requestIdleCallback to instruct a browser.

Some popular libraries implement the "push" approach where computations are performed when the new data is available. React, however, sticks to the "pull" approach where computations can be delayed until necessary.

React is not a generic data processing library. It is a library for building user interfaces. We think that it is uniquely positioned in an app to know which computations are relevant right now and which are not.

If something is offscreen, we can delay any logic related to it. If data is arriving faster than the frame rate, we can coalesce and batch updates. We can prioritize work coming from user interactions (such as an animation caused by a button click) over less important background work (such as rendering new content just loaded from the network) to avoid dropping frames.

Links

⚠️ **GitHub.com Fallback** ⚠️