хуки лучше стандартной классовой модели тем, что с использованием хук-подхода сайд-эффекты становятся полноправными участниками data flow

Использование useEffect позволяет синхронизировать сущности, находящиеся за пределами дерева React, со свойствами и состоянием

реакт обычно отдает дерево которое может изменяться во времени. оно называется host-tree
это может быть дерево дом-нод а может быть дерево пдф-документов
как бы то ни было обычно мы хотим представить некий ui с помощью этого дерева

react helps you write a program that predictably manipulates a complex host tree in response to external events like interactions, network responses, timers, and so on

renderer учит реакт взаимодействовать с конкретной средой хоста и управлять его экземлярами (instances)

рендереры могут работать двумя методами: мутируемым (например дом) и клонируемым (например react fabric)
( This mode is for host environments that don’t provide methods like appendChild() but instead clone the parent tree and always replace the top-level child)

The host instances are completely mutable

элементы
A React element is a plain JavaScript object. It can describe a host instance
React elements are immutable

React’s job is to make the host tree match the provided React element tree

системы нужно не строить а наращивать

реакт знает обо всех детях конкретного элемента и поэтому добавление/удаления верхнего элемента, сдвигает нижние, а не пересоздаёт их
https://overreacted.io/react-as-a-ui-runtime/#conditions

This is why we say reconciliation is recursive. When React walks the element tree, it might meet an element whose type is a component. It will call it and keep descending down the tree of returned React elements. Eventually, we’ll run out of components, and React will know what to change in the host tree.

(реакт спускается по дереву элементов, и когда видит компонент, то продолжает спускаться уже по его дереву элементов)

Why Do We Write super(props)

super(props) ссылается к родительскому конструктору. привязывает родительские методы к дочернему элементу

если мы не прокидываем props, то они всё равно привяжутся из родительского конструктора, но только после того, как весь конструктор запустится

constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }

Without an explicit constructor, all arguments are passed down automatically.