Virtual DOM, Fiber and reconciliation

Ques:-How createRoot method works behind the seen?
Ans:- By creating a virtual DOM structure similar to the browser's DOM.

Ques:- Why createRoot needs to create DOM?
Ans:- This virtual DOM allows for a comparison between the main DOM and the newly created DOM, enabling updates only for elements that have actually changed in the UI.

Ques:-Difference Between Browser Virtual DOM and ReactJS Virtual DOM:

Ans:-In contrast, the browser typically removes and repaints the entire DOM during a page reload, reconstructing the web structure from scratch. This process, known as a page reload, is why the page refreshes and the reload button becomes active.
In ReactJS, the virtual DOM works differently. It traces the entire DOM in a tree-like structure, allowing it to identify and remove only the values that have changed. The virtual DOM then updates the real DOM with these changes, optimizing performance and reducing unnecessary re-renders.

Additionally, ReactJS can handle frequent updates more efficiently. By using techniques like debouncing or batching updates, ReactJS can wait for a short period (e.g., 2-3 seconds) before applying changes. This ensures that only the final state is rendered, avoiding intermediate updates and improving overall performance.

Ques:-Is it possible to avoid immediate updates and instead optimize them using an algorithm?
Ans:-Yes, it is. There is no need to update the UI immediately every time. We can drop intermediate update calls and send only the final update calls.

React Fiber Architecture

The goal of React Fiber is to enhance React's performance in areas such as animation, layout, and gestures. Its key feature, incremental rendering, allows rendering work to be split into chunks and spread over multiple frames. Other notable features include the ability to pause, abort, or reuse work as new updates arrive, assign priority to different updates, and utilize new concurrency primitives.

What is reconciliation?

reconciliation:-The algorithm React uses to diff one tree with another to determine which parts need to be changed.
update:-A change in the data used to render a React app. Usually the result of setState. Eventually results in a re-render.

The central idea of React's API is to treat updates as if they cause the entire app to re-render. This enables developers to think declaratively, without worrying about efficiently transitioning the app between states.

Reconciliation is the algorithm behind the "virtual DOM." When a React application renders, it generates and saves a tree of nodes in memory, which is then translated to DOM operations in the browser. Upon updates (typically via setState), a new tree is generated and compared with the previous one to determine the necessary operations to update the app efficiently.

Reconciliation v/s rendering

Reconciliation and rendering are distinct phases in React's architecture. The reconciler determines changes within the tree structure, while the renderer applies those changes to update the app in its specific rendering environment, whether it's the DOM for web or native views for iOS and Android via React Native. This separation allows React to support multiple rendering targets efficiently by sharing a common reconciler while adapting specific renderers for each platform.

With Fiber, React's reconciler has been re-implemented to enhance performance and enable incremental rendering. While Fiber focuses on reconciliation, renderers need to adapt to leverage its new architecture effectively.

Scheduling

scheduling:-the process of determining when work should be performed.
work:-any computations that must be performed. Work is usually the result of an update (e.g. setState).

Key points:

Not every UI update needs immediate application to avoid wastefulness and maintain smooth user experience, preventing frame drops.
Updates vary in priority; for instance, animations should take precedence over updates from a data store.
A push-based approach requires manual scheduling of work by the developer, while a pull-based approach, like React employs, allows the framework to intelligently manage scheduling decisions.