React ~ Avoid Reconciliation - rohit120582sharma/Documentation GitHub Wiki

React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”.

When a component’s props or state change, React decides to update DOM. React first renders your component, then compares the result with the previous render result. If the render results are different, React updates the DOM.

Even though React only updates the changed DOM nodes, re-rendering still takes some time.

You can speed all of this up by overriding the lifecycle function shouldComponentUpdate, which is triggered before the re-rendering process starts. The default implementation of this function returns true, leaving React to perform the update.

If you know that in some situations your component doesn’t need to update, you can return false from shouldComponentUpdate instead, to skip the whole rendering process, including calling render() on this component and below.

In most cases, instead of writing shouldComponentUpdate() by hand, you can inherit from React.PureComponent. It is equivalent to implementing shouldComponentUpdate() with a shallow comparison of current and previous props and state.

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

React.memo, useCallback, and useMemo are Hooks in functional components to improve the performance.