6. React Reconciliation

Question 1

What function is the HTML-like syntax (JSX) in React transformed into?

Answer 1

It is transformed into the React.createElement function.

Question 2

What does the React.createElement function return?

Answer 2

It returns a description object, also known as a React Element.

Question 3

In a React Element object, what does the type property point to?

Answer 3

It points to a component, a memoized component, or a string representing an HTML tag.

Question 4

When will React re-render an element if its type remains the same between renders?

Answer 4

It will re-render if the component referenced in type is not memoized with React.memo.

Question 5

In a conditional render like {isCompany ? <Input /> : <TextPlaceholder />} what happens to the components when isCompany flips from false to true?

Answer 5

The TextPlaceholder component is unmounted, and the Input component is mounted.

Question 6

In a conditional render {condition ? <Input /> : <Input />} with different props, why is the internal state of the Input preserved when the condition changes?

Answer 6

Because the component type (Input) is the same, React re-renders the existing component with new props instead of unmounting and mounting a new one.

Question 7

React avoids direct DOM manipulation by creating and modifying a tree of objects commonly known as the _____.

Answer 7

Virtual DOM

Question 8

In React’s Virtual DOM, what is the value of the type property for a standard HTML element like <input>?

Answer 8

The value is a string with the HTML tag name, e.g., ‘input’.

Question 9

In React’s Virtual DOM, what is the value of the type property for a React component like <MyComponent />?

Answer 9

The value is a reference to the component’s function itself (e.g., MyComponent).

Question 10

During an initial render, what does React do when it encounters an element whose type is a function?

Answer 10

It calls the function (the component) and then iterates over the tree that the function returned.

Question 11

During a re-render, what is the primary property React compares between the ‘before’ and ‘after’ element objects to decide its action?

Answer 11

React compares the type property.

Question 12

If an element’s type changes between re-renders, what two actions will React perform?

Answer 12

React will unmount the ‘previous’ component and mount the ‘next’ component.

Question 13

What is the primary reason it’s considered an anti-pattern to define a component inside another component’s render body?

Answer 13

The inner component function is recreated on every re-render of the parent, resulting in a different function reference each time.

Question 14

What is the consequence for reconciliation when a component’s type is a different function reference on every render?

Answer 14

React sees the type as having changed, causing it to unmount the old component and mount a new one on every single re-render.

Question 15

The unintentional process of a component being destroyed and recreated on every re-render is called _____.

Answer 15

re-mounting

Question 16

What are two negative consequences of unintentional re-mounting?

Answer 16

It is terrible for performance and causes the loss of all associated state and DOM elements (like focus).

Question 17

In the ‘mysterious bug’ example, why did {isCompany ? <Input /> : <Input />} preserve state?

Answer 17

Because the type property for both conditional branches was a reference to the exact same Input component function.

Question 18

When React encounters an array of children during reconciliation, how does it compare the elements between renders by default?

Answer 18

It compares elements based on their position (index) in the array.

Question 19

How can you fix the ‘mysterious bug’ where two different Input components share state by altering their position in the render output?

Answer 19

By structuring the conditional render so the components occupy different positions, like {isCompany ? <Input /> : null}{!isCompany ? <Input /> : null}.

Question 20

What is the primary purpose of the key attribute in React?

Answer 20

It provides a stable and unique identity for an element within an array of children across re-renders.

Question 21

When rendering a dynamic list, if the key and type of an element match between renders, what will React do?

Answer 21

React will re-use the existing component instance, with all its associated state and DOM, regardless of its position in the array.

Question 22

If you reorder a list of stateful components that do not have keys, what observable bug might occur?

Answer 22

The component’s internal state will remain with its original position (index) rather than moving with the data item it represents.

Question 23

True or False: The key attribute is primarily a performance optimization that prevents list items from re-rendering.

Answer 23

False; key is for identity and instance re-use, while React.memo is used to prevent re-renders.

Question 24

To prevent re-renders of items in a list, you should wrap the item component in _____.

Answer 24

React.memo

Question 25

When rendering a dynamic list of memoized components that can be reordered, why is using the array `index` as a `key` a bad practice?

Answer 25

The component at a given index will receive new props from different data, causing a re-render and defeating the purpose of memoization.

Question 26

What should be used as a `key` for a dynamic list of memoized components to ensure optimal performance when reordering?

Answer 26

A stable and unique identifier from the data item itself, such as a database ID.

Question 27

What is the 'state reset' technique in React?

Answer 27

Forcing a component to unmount and mount from scratch by changing its `key` attribute between re-renders.

Question 28

How could you reset the state of an `` component whenever the page URL changes?

Answer 28

By passing the URL as the `key` prop to the Input, like ``.

Question 29

What is the performance consideration when using the 'state reset' technique with a changing `key`?

Answer 29

It forces a complete unmount and mount cycle, which can be expensive for large or complex components.

Question 30

How can you use the `key` attribute to force React to re-use a component instance even if it appears in a different position in the children array?

Answer 30

By giving the components in different positions the exact same `key` value.

Question 31

Why does React mandate `key`s for dynamic lists (e.g., from `.map()`) but not for a static list of sibling elements?

Answer 31

React assumes static elements won't change order, so their position is a reliable identifier, whereas dynamic lists may be reordered, requiring an explicit key.

Question 32

When a dynamic array (from `.map()`) and a static element are rendered as siblings, how does React structure them in the virtual DOM's children array?

Answer 32

React places the entire dynamic array as a single item (an array) in the first position, followed by the static element.

Question 33

If you add an item to a dynamic array that is followed by a static component, will the static component re-mount?

Answer 33

No, because React treats the entire dynamic list as a single child, so the static component's position in the parent's children array remains stable.

Question 34

During reconciliation, React will re-render an element if its _____ and its position in the array are the same between renders.

Answer 34

type

Question 35

A conditional element like `{isSomething ? : }` will take up how many places in its parent's children array?

Answer 35

It will take up only one place, even if one of the conditions renders `null`.