What is console.log in the render method of a react component showing?

Question

When I have a React.js component and I put console.log(this) at the top of the render function, when it fires, is that React telling me my component is rendering the virtual dom or the actual dom? Should I be optimizing for this not to appear as much as possible? What is more expensive the rendering of the virtual dom or actual?

import React from 'react';

class ItemRow extends React.Component {

  render() {
    console.log(this)
    return (
      <div className="item">
        Hi
      </div>
    )
  }
}

export default ItemRow;

Answer 1

"this" actually references the Javascript element depending on the context of it's use.

console.log(this). In my side, I am getting entire object.

props: {history: {…}, location: {…}, match: {…}, staticContext: undefined, 
data: {…}, …}
refs: {}
state: null

React automatically handles virtual dom manipulation. It implements something like Diffing Algorithm where it reconciles the dom elements. It only updates the changed attributes. That's why Virtual dom manipulation is faster than actual dom manipulation. Please follow this link to get more deep insights. https://reactjs.org/docs/reconciliation.html

Answer 2

Actual dom update is more expensive. The fact is even if there is multiple renders execution, the virtual dom only updates if there is a change in values. If there is a change then it will patch the new changes to original dom.