React Advanced

React Advanced 2022

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.

Understanding React’s Fiber Architecture

Tejas Kumar

React Summit Remote Edition

React Summit Remote Edition 2021

React Fiber is a reconciliation algorithm introduced in React 16 to address laggy input fields and heavy rendering. The old stack reconciler caused a laggy experience by re-rendering the entire subtree immediately. React Fiber solves this by breaking work into incremental units and assigning priorities. It introduces concurrent mode to make apps responsive and adaptable. The useDeferredValue hook is commonly used to keep the interface responsive by rendering components immediately and others at a later time.

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will. In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#react reconciliation