React Diffing Flashcards
These flashcards should help reinforce your understanding of how the diffing algorithm works in React's reconciliation process, the assumptions it's based on, and how React handles different and same elements between renders.
What is the diffing algorithm in React’s reconciliation process?
The diffing algorithm is part of the reconciliation process in React and is responsible for comparing elements step-by-step between two renders based on their position in the tree.
What are the two fundamental assumptions that the diffing algorithm is based on?
The first assumption is that elements of different types will produce different trees, and the second assumption is that elements with stable keys will stay the same across renders.
What happens when an element’s type changes between renders in React?
When an element’s type changes, React assumes that the element itself and all its children are no longer valid. Therefore, all these elements are destroyed and removed from the DOM, including their state.
When elements change type in React, how are they rebuilt?
When elements change type, React rebuilds the tree with brand new elements of the new type, including components with new instances. State is effectively reset in this process.
What happens when the same element at the same position in the tree exists between two renders in React?
If the same element at the same position in the tree exists between two renders, it is preserved in the DOM, including all child elements and the component’s state.
How does React handle changes in attributes of elements in the reconciliation process?
React efficiently mutates DOM element attributes when there are attribute changes. For React elements, it passes in new props without removing the element from the DOM.
When might you use the ‘key’ prop in React?
The ‘key’ prop is used to hint to React that it should create a brand new component instance with new state instead of preserving the existing element when there are changes.
