Rendering

• https://react.dev/learn/render-and-commit
• https://www.youtube.com/playlist?list=PLC3y8-rFHvwg7czgqpQIBEAHn8D6l530t
• https://github.com/rohan-paul/Awesome-JavaScript-Interviews/blob/master/React/Virtual-DOM-and-Reconciliation-Algorithm.md
• Phases
  • Trigger Phase
  • Rendering Phase
  • Commit Phase

Rendering

• Rendering is React calling your components
• Rendering parent component causes child components to be rendered as well

Render Tree

• https://react.dev/learn/understanding-your-ui-as-a-tree
• Render Tree is composed of react elements not HTML elements

Reconciliation

• https://legacy.reactjs.org/docs/reconciliation.html
• It is an algorithm that synchronizes the virtual DOM with the real DOM, ensuring efficient updates

How to check if state is changed?

• React uses Object.is() to compare and check if states have changed
• Object.is() is very much similar to === but it has slightly different behavior with signed zeros and NaN
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Virtual DOM

• ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM
• Then React can figure out which objects have been changed, and this process is called Diffing
• Once React knows which objects to update, it updates only those objects in the Real DOM