Comprehensive Guide to React Lifecycle, Hooks, Fiber, Virtual DOM, and Advanced Patterns

Introduction

The article presents a detailed walkthrough of core and advanced React concepts, ranging from component lifecycles to the Fiber architecture and modern patterns such as higher‑order components, render props, and error boundaries.

Class Component Lifecycle

It first lists the pre‑v16 lifecycle methods ( constructor , componentWillMount , render , componentDidMount , etc.) and then shows the revised phases introduced in React 16, highlighting the removal of the will methods and the addition of getDerivedStateFromProps and getSnapshotBeforeUpdate .

New Lifecycle Methods

getDerivedStateFromProps is a static method that replaces componentWillReceiveProps by deriving state from incoming props. getSnapshotBeforeUpdate runs after the render but before the DOM is mutated, allowing the component to capture a snapshot that is passed as the third argument to componentDidUpdate .

Removal of Unsafe Lifecycles

The article explains why componentWillMount , componentWillReceiveProps , and componentWillUpdate were deprecated: they are often misused and can cause bugs in asynchronous rendering. The new UNSAFE_ prefixes are mentioned for backward compatibility.

Asynchronous Rendering and Time Slicing

React’s concurrent mode splits rendering work into small units that run during browser idle periods using requestIdleCallback . This time‑slicing improves responsiveness by allowing the UI to pause and resume rendering without blocking the main thread.

Virtual DOM and Diff Algorithm

The virtual DOM is described as a JavaScript object representation of the real DOM. React’s diff algorithm compares the new and old virtual DOM trees, applying only the necessary changes (INSERT, MOVE, REMOVE) to the real DOM, which reduces reflows and repaints.

Render Process

State or prop changes trigger a re‑render, producing a new virtual DOM. The diff algorithm then computes the minimal set of updates, and only those real DOM nodes are mutated. The article also notes the JSX compilation steps, including the shift from React.createElement to the new JSX runtime ( _jsx from react/jsx-runtime ) in React 17.

Event System and Synthetic Events

React’s synthetic event system normalises browser differences and uses event delegation by attaching listeners to the document. The article contrasts native addEventListener with React’s onClick handlers, explains how stopping propagation in a native event prevents the synthetic counterpart, and discusses the benefits and drawbacks of this delegation model.

Fiber Architecture and Scheduling

Fiber replaces the previous recursive diff with a priority‑based scheduler that breaks work into units (fibers) and processes them using requestIdleCallback . Different priority levels (Immediate, UserBlocking, Normal, Low, Idle) allow React to pause, resume, or pre‑empt work, preventing long‑running tasks from freezing the UI.

State Updates and Batching

State updates via setState or the useState setter are synchronous at the API level but are batched during React event handling, lifecycle methods, or when isBatchingUpdates is true. The article clarifies why updates appear asynchronous in React events and synchronous in native callbacks, and mentions React 18’s automatic batching.

Higher‑Order Components (HOC)

HOCs are functions that take a component and return an enhanced component. Two implementation styles are shown: prop‑proxy (wrapping and passing extra props) and inheritance (extending the original component). The article lists common use‑cases (prop injection, render control, dynamic loading) and warns about pitfalls such as prop collisions, loss of static properties, ref forwarding, and performance overhead.

Render Props

Render props are components that accept a function prop (e.g., render ) and invoke it to render UI, allowing the parent to pass state or methods as arguments. The article notes that defining the render function inline can break PureComponent optimisations because a new function is created on each render.

Error Boundaries

Error boundaries are class components that implement static getDerivedStateFromError and componentDidCatch to catch rendering errors in their subtree, display a fallback UI, and optionally log the error. Limitations include inability to catch errors in the boundary itself, asynchronous code, event handlers, or server‑side rendering, and the fact that they are only available as class components.

Conclusion

Overall, the article serves as a comprehensive reference for React developers, covering both foundational concepts (lifecycle, virtual DOM) and modern advances (Fiber, hooks vs HOCs, error handling), with practical code snippets to illustrate each topic.