Losing information by not rendering after a state change could be very dramatic this is why re-rendering is the safer alternative. React is extremely careful and re-renders "everything all the same time". More details about this mechanism can be found in React's documentation about reconciliation. There is no DOM update if nothing has changed. Only the parts of the real DOM are updated which have changed.New VDOM is compared against a previous VDOM snapshot.VDOM gets updated by a state change in the application.This process is called diffing and is based on these steps: The React DOM library is used to efficiently check what parts of the UI really need to be visually updated in the real DOM. If we change the state in our application, these changes are first applied to the VDOM. React uses a Virtual DOM (VDOM) as an additional abstraction layer on top of the DOM which reduces real DOM updates. This is where React's Virtual DOM comes into the game. Each time a component is re-rendered its JSX is converted to DOM nodes which takes extra computation time and power. This becomes a problem if React components become too big or are nested on multiple levels. We should be aware that real DOM updates are slow as they cause a re-drawing of the UI. The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.ĭOM nodes are created by React if the JSX code is converted. If you open a website in the browser, what you see on your screen is described by the DOM (Document Object Model) and represented through HTML (Hypertext Markup Language). What is rendering?įirst, we need to understand what rendering in the context of a web application means. In my opinion, it is important to know when React triggers a re-rendering of a component to be able to debug performance issues and develop fast and efficient components.Īfter reading this article, you should have a good understanding of how React rendering mechanism is working and how you can debug re-rendering issues. It only triggers an update for the parts of the real DOM that have changed. React is known for its performance by using the Virtual DOM (VDOM).
0 Comments
Leave a Reply. |