Пост Как работает React Compiler

Как работает React Compiler Автор объясняет, как работает компилятор React начиная с самых основ (транспилятор, AST, мемоизация), а затем анализирует результат компилятора на конкретном примере: function List(t0) { const $ = _c(6); const { items } = t0; /* --snip-- */ let t2; if ($[1] !== items) { const pItems = processItems(items); let t3; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = (item) => <li>{item}</li>; $[3] = t3; } else { t3 = $[3]; } t2 = pItems.map(t3); $[1] = items; $[2] = t2; } else { t2 = $[2]; } /* --snip-- */ } Функция _c (сокращенно от cache) создает массив длинной 6. Компилятор React проанализировал функцию Link и понял, что для максимизации производительности надо хранить 6 элементов. Когда функция Link вызовется впервые, то результат каждой операции сохранится в одном из шести элементов массива $. У компилятора есть недостаток: он затрудняет дебаг нашего кода, добавляя новый уровень абстракции. Поэтому стоит научиться понимать, как работает React Compiler, чтобы лучше дебажить компилированный им код. https://tonyalicea.dev/blog/understanding-react-compiler/