Virtual DOM & React Fibers

Hello there! previously we have discussed react features and also components we can create in react.

Before moving further, lets understand more about virtual DOM and how react uses it internally.

Virtual DOM (also called as Ideal DOM) is a pattern unlike a technology. Its an in-memory representation of the DOM that react maintains and syncs using ReactDOM library.

React Fibers

React Fibers is the reconciliation engine in React. Its goal is to enable incremental rendering of the virtual DOM. Incremental rendering is the ability to split the rendering work into chunks and spread it out over multiple frames.

Reconciliation

• React maintains virtual DOM to compare with real DOM and keeps them in sync.

• Reconciliation is an algorithm react uses to differentiate one DOM tree from another to determine which part need to be changed.

• When comparing two react elements of same type, react looks for attributes, keeps same DOM and changes attributes.

• While reviewing on children of a DOM node, react just iterates over both lists of children at the same and generates mutation wherever necessary.

• If root element is different, react with tear down existing tree and build a new one from scratch.

• If element is added at the end, then performance of mutation is optimum.

• If element is added at the beginning, performance is poor because react will mutate every child instead of keeping existing children intact. Hence its suggested to pass key  attribute for child elements.

• Based on the key value of the child elements, react learns that other children have just moved when new element is added.

• Fibers are objects used by react to hold additional information about component tree.

• They may also be considered as a part f Virtual DOM.

Rendering

• Whenever there is any change in state (model) or props of a component, react re-renders that component.

• React handles DOM manipulations internally, no code is required.

Automatic Batching

• React groups multiple state updates into single re-render for better performance.

• This means that state updates are asynchronous, may not happen instantly all the time.

Reconciliation vs Rendering

• Reconciliation identifies which parts of the tree have changed.

• Rendering uses information identified by reconciliation algorithm to actually update the DOM.

Shadow DOM

• Shadow DOM is a browser technology.

• Shadow DOM is a new DOM feature that helps you build components.

• Its a subtree or separate DOM for an element, connected to the element but separate from other children of the same element.

• You can think of shadow DOM as a scoped subtree inside your element.

• Primarily designed for scoping variables and CSS in web components

Key React Design Principles

• Composition

• Different components should work together

• Any state changes to child shouldn’t affect any other components using it

• Similar to higher order components, Any specific component (ex., Dog) renders more generic component (ex., Animal) and configures with props, shouldn't change parent component.

• Reuse and return new component (ex., Dog) from existing (ex., Animal) (similar to HOC), making it more special case of original component by reconfiguring it with props as a parameter.

• Abstraction

• Using reconciliation enables declarative API of react, where we tell react what state to be in and react abstracts out attribute manipulation, event handling and manual DOM updates.

• Adding features and performing behind the scene activities

Introduction to React - Key Features, Building blocks, and Local Environment Setup

Understanding React Components In Detail