Sobes.tech
Middle+

In which cases does a component re-render in React? Tell us about reconciliation.

sobes.tech AI

Answer from AI

Re-rendering (re-render) of a component in React occurs in the following cases:

  • Change of the component's props.
  • Change of the component's state.
  • Change of the context, if the component uses it.
  • The parent component has re-rendered, and React decides whether to update the child.

Reconciliation is the process of comparing the virtual DOM with the previous version to determine the minimal set of changes needed to update the real DOM. React uses a diffing algorithm optimized for fast comparison of trees:

  • If the element is of the same type, React updates its props.
  • If the element is of a different type, React removes the old one and creates a new one.
  • Keys help React efficiently match elements in lists.

Thus, React minimizes the number of operations on the real DOM, which improves application performance.