Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Which is created first: the Real DOM or the virtual DOM?

When a React app is rendered for the first time, is the real DOM or the virtual DOM created first?

React with JSX is converted to React.createElement(). So, does virtual DOM creation start from here and then, based on virtual DOM, the real DOM is generated?

Tags:

2

Answers


  1. 0

    Well, I think if you say virtual DOM created first and then created real DOM based on the virtual DOM, it’s wrong. It’s because when a react app runs for the first time, there’s already an existing real DOM. This usually includes an empty HTML structure, like a root element. So when the react app starts, react generates a virtual DOM tree and stored the result in memory and then, react compares the current virtual DOM with previous one (If it’s first time, the previous virtual DOM is empty). And react updated the real DOM after React’s reconciliation process.

    So we need to say like this:

    1. When a React app is rendered first time, it has already empty real DOM like <div id="root"></div> and it creates a virtual DOM tree by calling React.createElement().
    2. Once the virtual DOM is created, React uses a process called reconciliation.
    3. After the process, react updates the real DOM by inserting, updating and removing elements.

    To get more detailed information, I prefer you see react official documentation here

    Login or Signup to reply.
  2. 0

    virtual DOM is updated prior to a DOM update

    The below briefing is based on this : Render and Commit

    A rendering process in React dictates a DOM update, therefore a rendering process must be carried out prior to a DOM update. A rendering process in React is also termed as virtual DOM update. Therefore virtual DOM is updated prior to a DOM update.

    A virtual DOM update has the following two distinct stages:

    a) Triggering a render

    b) Rendering a component

    Triggering or requesting a render:

    A render must be triggered when an app will start, this is the initial render. Technically, this initial render is triggered by directly rendering the root component by the render method in the root object created by createRoot function invocation. The below code in index.js does the same. Please do note that a render is just being triggered over here, the actual render process is a separate one which will be followed subsequent to this request. The details of a render process will be explained in the following sections.

    index.js

    import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

    All subsequent render or rerender triggers or requests through state changes in a component. The following code puts a “request for rerender” on invoking the event handler handleClick.

    const [someState, setSomeState] = useState(‘’)

function handleClick() { 
   setSomeState(‘X’);
}

    Rendering a component:

    Rendering in React terms is just about calling components. For an initial render, React will directly call the root component. The rerenders are triggered by state changes. React will call the respective components for which the states have been changed. This rendering process as such is recursive in nature. As each render or call will return some jsx, which may include nested components. The render process will continue to proceed until all the nested components are rendered or called. This recursive render or call will result-in the complete set of jsx to be applied on the DOM in response to the original request for this render – may it be the initial render or a rerender due to a state change. These jsx statements collectively form the Virtual DOM. Once transpiled, these jsx statements will be translated into the respective React elements which essentially describe how the respective DOM element should be updated. Therefore the Virtual DOM consists of the descriptions about the DOM elements that would need to be updated.

    Commit – the final phase

    Commit is the final phase at which React will update DOM using the Virtual DOM which resulted in rendering. For a commit followed by an initial render, React will use appendChild() DOM API to update all the DOM nodes. For a commit subsequent to a rerender, React will apply the minimal necessary operations to make the DOM matches with the latest virtual DOM. During render, these minimal necessary operations will be calculated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search