Notes on React rendering, part 1

General notes and terminology.

Rendering vs DOM updates vs Paint

“Rendering” does not mean that React will necessarily update the component in the DOM. Also, this is not to be confused with browser’s “paint”, which is actually drawing the page on the screen. “Rendering” means that React will execute functional component’s function (or call the render method of a class component) and save the result.

React keeps the current UI state in an inner structure often described as “Virtual DOM” (this is still popular, though, React’s core team says that it’s not the best term). React renders the component tree starting from the root downwards. However, this doesn’t mean that on every render iteration React will re-render every node in the component tree. The components that need updates are marked, and only those will be re-ndered.

Rendering vs Reconciliation vs Commit

Rendering is gathering each component current representation through calling components. After getting render results from the component tree, React calculates the difference with the previous virtual tree and creates a patch, that contains the necessary updates. This process is called reconciliation. The update can be applied to different targets - browser DOM or native view in mobile through React Native. Then React applies the patch (updates the browser DOM in case of a web app) in a single synchronous operation, which is called the “commit phase”.

React components vs React Elements

React components are not to be confused with React elements. React component is a function that returns JSX or a class that has a render method that returns JSX:

const Greet = ({name}) => <p>Hello, {name}!</p>

A React element is what gets returned from React components. It is an object representation of a DOM node. A component can be called as an element:

<Greet name="Alice" />

Calling a component as element via JSX results in a React.createElement call, which returns an element object like

{type: Greet, props: {name: "Alice", children: ...}... }