1 views collected around this technical thread.
React 16 feels smoother than React 15 because its new Fiber architecture breaks state updates into small, priority‑aware units that the Scheduler runs asynchronously, allowing high‑priority user input to render first while lower‑priority work is paused and resumed, eliminating the lag seen in full‑tree re‑renders of React 15.
React’s core fiber system traverses a depth‑first tree using performUnitOfWork, splits rendering into beginWork and completeWork, then commits in before‑mutation, mutation, and layout phases, while hooks like useState and useEffect are implemented via linked‑list queues that ensure deterministic updates and side‑effect handling.
This article provides an in‑depth overview of React class component lifecycles before and after version 16, the new lifecycle methods, virtual DOM and diff algorithm, asynchronous rendering with Fiber, state batching, higher‑order components, render props, and error boundaries, illustrating each concept with code examples.
This article explains how to build a lightweight React‑like library called Didact, covering its core concepts, step‑by‑step source‑code walkthrough, implementation of createElement, render, Fiber architecture, concurrent mode, and a useState hook for function components.
The article explains why React is well‑suited for cross‑platform dynamic development, detailing its data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, Taro reconciler adaptations, and independent event system, and shows how React can serve as both a DSL and a full runtime for mobile and web.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations such as React Native and Taro enable efficient cross‑platform dynamic applications, and provides code examples and practical guidance for developers.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations in frameworks like React Native and Taro enable efficient cross‑platform dynamic applications, while comparing it with traditional template‑based approaches.
This article explains React's Diff algorithm and Fiber architecture, compares it with Vue2 and Vue3's double‑ended diff approaches, and discusses why Vue does not need Fiber or time‑slicing, providing code examples and visual illustrations of the underlying mechanisms.
This article explains React's event system, covering how onClick events are delegated to the document, processed through synthetic events, and handled via the fiber architecture, plugin registry, and priority-based dispatching in React 16.13.1.
This article explains React 16's three‑layer architecture—Scheduler, Reconciler, and Renderer—introduces fiber nodes and trees, and details how the render and commit phases process updates using beginWork, completeWork, effect lists, and three‑step DOM mutation.
This article explains the React Fiber architecture introduced in React 16, compares it with React 15, details how Fiber nodes form a tree, and walks through the source-level implementation of the Diff algorithm, including single-node and multi-node updates, with code examples and diagrams.
This article examines the performance challenges of high‑concurrency Java services and demonstrates how applying reactive programming with Spring WebFlux and lightweight fibers via Quasar can dramatically reduce thread and memory overhead, improve throughput, and simplify asynchronous code.
This article provides a comprehensive overview of React's runtime optimization strategies across versions 15 to 18, explaining the evolution of its architecture, the introduction of Fiber, concurrent rendering, scheduling, priority lanes, and new APIs such as Suspense, startTransition, and useDeferredValue, while including detailed code excerpts and practical insights for developers.
This article explains what the Virtual DOM is, why it improves performance, how React implements it through ReactElements and Fiber, and details the diff algorithm and reconciliation process that enable efficient UI updates in modern frontend development.
React Fiber rewrites React’s core algorithm by breaking the diff phase into small, interruptible fiber units, scheduling them during browser idle time with requestIdleCallback, using double‑buffered trees and effect lists to pause, resume, and efficiently commit DOM updates, thereby improving UI responsiveness in large applications.
This article explains how React 16 introduced the Fiber architecture to replace synchronous VDOM rendering, using operating‑system‑style interrupt mechanisms, RequestIdleCallback scheduling and task splitting to improve rendering performance and user experience in modern browsers.
The article explains how React’s virtual‑DOM diff can become a performance bottleneck, reviews classic optimizations such as debouncing, PureComponent, and idle callbacks, then details how the Fiber architecture makes diffing interruptible and prioritized and how the same reconciler can be leveraged to build custom cross‑platform renderers.
React Fiber replaces the old Stack Reconciler with a linked‑list of Fiber nodes that enable incremental, pause‑and‑resume rendering, priority scheduling, and a three‑step commit phase, allowing smoother asynchronous updates, better performance, and the foundation for Concurrent Mode and Suspense.
The article explains how React Node Desktop (RND) combines React JS, Node.js, and a native UI engine to enable lightweight, cross‑platform desktop apps, then details React Fiber’s architecture—its tagging, workloop, update and commit phases—and describes RND’s JS‑native messaging, bundle splitting, animation support, and future relevance for JavaScript‑driven desktop UI.
This article explains why React Fiber was introduced, describes its core concepts such as the fiber tree, work‑in‑progress tree, double buffering, priority scheduling, and lifecycle changes, and summarizes the new capabilities it brings to improve UI performance and responsiveness.