How does React renderer work exactly when we call setState?

Technology CommunityCategory: ReactHow does React renderer work exactly when we call setState?
VietMX Staff asked 3 years ago

There are two steps of what we may call render:

  1. Virtual DOM render: when render method is called it returns a new virtual dom structure of the component. This render method is called always when you call setState(), because shouldComponentUpdate always returns true by default. So, by default, there is no optimisation here in React.
  2. Native DOM render: React changes real DOM nodes in your browser only if they were changed in the Virtual DOM and as little as needed – this is that great React’s feature which optimizes real DOM mutation and makes React fast.