[Advanced React] React Reconciliation

[reboottime]

About

This article is a note of Mastering React Reconciliation - Advanced React course

React Reconciliation: how React decides which component should be rendered/ removed

• Diffing and reconciliation
• How state update works
• Why creating component inside other components
• Solve the bug two components sharing the same state
• How react re-rendering arrays
• What's the purpose of key attribute and why key is useful outside of list

[reboottime]

Practices

• Mystry issue practice code: https://www.advanced-react.com/examples/06/01

[reboottime]

React Conciliation Process

React updates the part that needs update, instead of removing and adding a new one, by Virtual DOM.

The virtual DOM is a giant object that supposed to render all their props and children. Which are also the same shape that are supposed to be rendered inside.

For example

[reboottime]

Bad Practices

Example 2, The key application

• The problem

Though there is a re-rendering between the isCompany value changes, the internal state of Input preserves

• The solution
  • Group Elements using Array
  • Add key to element

Example 3, how React reads array

• The problem

• How adding key helps

If there is key defined on element, the key order takes priority.

[reboottime]

Virtual DOM Example

• Mounting: append to DOM tree

• Re-rendering: update the DOM tree

  • shallow comparison
  • If type
    • is the same, then do update and internal state will be preserved
    • is not the same, then state will be reset

• unmounting: remove it from DOM tree

{
  "type": "FormGroup",
  "props": {
    "id": "",
    "controlId": "",
    "children": {
      "type": "div",
      "props": {
        "className": ""
      },
      "children": [
        {
          "type": "FormLabel",
          "props": {
            "className": ""
          },
          "children": "Label Text"
        },
        {
          "type": "FormControl",
          "props": {
            "type": "text",
            "placeholder": "Hello",
            "className": ""
          },
          "children": []
        },
        {
          "type": "FormText",
          "props": {
            "className": ""
          },
          "children": "Help text"
        }
      ]
    }
  }
}