React Compiler: Vocabulary for Automatic Memoisation and the Forget Algorithm (англійською)

React Compiler (раніше відомий як Forget project) змінює те, як розробники React думають про продуктивність. Замість вручну обгортання коду в useMemo і useCallback, компілятор обробляє оптимізацію автоматично. Знання англійської мови, що використовується у цьому інструменті, допоможе вам читати документацію, обговорювати запити на звантаження і впевнено стежити за обговореннями на конференціях.

---

Основні концепції компілятора

** React Compiler ** — інструмент для збирання, який аналізує ваші компоненти та гачки React, а потім автоматично вставляє замітки, де це необхідно, без зміни поведінки вашого коду під час виконання.

“Ми перейшли на компілятор React у останньому спринті, тому вилучили всі вручну виклики useMemo з компонентів панелі управління.”

** Forget algorithm ** — внутрішня назва стратегії оптимізації ядра компілятора, яка визначає значення, які не слід перераховувати під час кожного відтворення, і автоматично кешує їх.

“Алгоритм Forget виявив, що наш розрахунок ціни перезапускався без потреби при кожному натисканні клавіші.”

** автоматичне запам’ ятовування ** — процес, за допомогою якого компілятор, а не розробник, вирішує, які значення і зворотні виклики буде кешовано між відтворенням.

• “Автоматичне запам’ ятовування означає, що нам більше не потрібно перевіряти кожен компонент на відсутність обгорток useCallback.” *

** аналіз потоку даних ** — метод, який використовує компілятор для відстеження руху значень по дереву компонентів, визначаючи, які виводи залежать від яких вхідних даних.

• “Аналіз потоку даних дозволяє компілятору знати, що це похідне значення змінюється лише при зміні значення prop ідентифікатора користувача.” *

---

Правила і обмеження

** Правила React ** — набір правил, яких має дотримуватися ваш код, щоб компілятор працював правильно, включаючи написання чистих функцій відтворення і не змінювати прямо властивості або стан.

“Перед включенням компілятора команда провела перевірку, щоб переконатися, що код відповідає правилам React.”

** use no memo ** — спеціальна директива ( "use no memo" ), яку ви можете встановити у верхній частині компонента або гачка, щоб виключити його з оптимізації компілятора, корисна для зневадження або кращих випадків.

• “Ми додали до цього компонента застарілої версії зауваження про те, щоб не використовувати цей компонент, поки ми розслідували неочікуване перевідтворення.” *

** припущення компілятора ** — припущення, яке компілятор робить щодо вашого коду на основі правил React; порушення припущення може призвести до того, що компілятор створить неправильний вивід або пропустить оптимізацію.

• “Порушення припущення компілятора за допомогою мутації локального масиву на місці призвело до того, що значення, що було записано, стало застарілим.” *

---

Вихід компілятора і інструменти

** вивід компілятора ** — перетворений JavaScript, який компілятор створює після аналізу вашого коду; він виглядає як звичайний код React, але містить змінні кешу і умовні перевірки.

• “Перевірка виводу компілятора допомогла нам зрозуміти, чому певне значення було кешовано на двох окремих шляхах відтворення.” *

** Вкладка компілятора React DevTools ** — панель, додана до розширення переглядача React DevTools, яка показує, які компоненти було оптимізовано компілятором, і підсвічує всі компоненти, які було пропущено.

“На вкладці компілятора React DevTools три компоненти були позначені червоним, що означає, що компілятор не зміг їх оптимізувати через доступ до динамічних властивостей.”

** зкомпільований компонент ** — компонент React, вивід якого було оброблено і перетворено компілятором, щоб включити логіку автоматичного запам’ ятовування.

• “Після перенесення, кожен зібраний компонент у нашій програмі побачив вимірюваний спад у марному відтворенні.” *

bail- out — коли компілятор вирішує, що не може безпечно оптимізувати компонент або гачок і залишає його незмінним, зазвичай, тому що код порушує одне з правил React.

• “Компілятор випустив баєк- аут на аналітичному гачку, оскільки він читав з змінної глобальної змінної.” *

---

Використання мови та мови мовлення

** відтворення, яке було втрачено ** — цикл відтворення, у якому компонент виконується знову, але виводить той самий вивід, що і раніше, тобто робота була непотрібною; компілятор намагається уникнути цього.

• “Профілювання виявило десятки марних відтворення на бічній панелі, які автоматичне запам’ ятовування тепер вилучило.” *

** інкрементальний прийом ** — рекомендований підхід до увімкнення компілятора у існуючій базі коду, активація компілятора для одного каталогу або одного пакунка за раз, а не для всіх за раз.

• “Ми використовували інкрементне прийняття, щоб спочатку розгорнути компілятор до потоку вилучення, перш ніж торкатися решти програми.” *

** eslint- plugin- react- compiler ** — додаток ESLint, який перевіряє ваш код на порушення правил React перед тим, як ви увімкнете компілятор, допомагаючи вам виявити проблеми на етапі перевірки.

“Запуск eslint-plugin-react-compiler в CI заблокував декілька PR, які могли б призвести до виходу компілятора з ладу в виробничих умовах.”

---

Practice

Прочитайте офіційну документацію компілятора React і пошукайте фрази data-flow analysis, bail-out, і incremental adoption. Спробуйте пояснити колегі англійською мовою, чому компілятор виконує баїл- аут на компоненті, який безпосередньо мутує його властивості, використовуючи принаймні три терміни з цього повідомлення.

На практиці: Навігація та співпраця

Будьмо чесні, розуміння технічного жаргону може бути неймовірно ізоляційним, коли ви вивчаєте нову мову. Це не просто про те, щоб знати * що * щось робить; це про те, як хтось інший описує це, нюанси їхньої фрази, і як ефективно реагувати в професійному середовищі. Алгоритм Forget, як ми вже обговорювали, в основному стосується зменшення непотрібних переобчислень — оптимізації продуктивності за допомогою запам’ятовування того, що певні дані не змінилися. Але перетворення цієї концепції в чітку, дієву зворотну зв’ язок під час перегляду коду або обговорення навколо запитів на збирання може бути складним.

Розглянемо цей сценарій: Сара, старший інженер інтерфейсу, щойно переглянула PR Джона для компонента, який показує список продуктів. Вона помічає, що компонент використовує React Compiler широко, щоб запам’ятати відтворення окремих елементів продукту. Вона залишає коментар до опису PR: «Джон, я бачу сильне використання алгоритму Forget тут — особливо з компонентом ProductItem. Хоча це чудово, що ви вирішуєте потенційні проблеми з продуктивністю, чи можете ви пояснити * чому * ви вирішили агресивно запам’ ятовувати ці конкретні дані? Чи ми впевнені, що ідентифікатори продуктів не змінюватимуться досить часто, щоб виправдати менш агресивний підхід? Можливо, документування логіки вашого вибору було б корисним для майбутніх супроводжувачів»

Це не просто вказує на те, що він використовує «загадування»; це про те, щоб спонукати його сформулювати * чому * ця конкретна реалізація є правильною. Ключ тут в тому, щоб зробити це як розслідування, а не критику. Фрази типу “Чи можете ви пояснити…” і “Чи ми впевнені…” пом’якшують відгук і запрошують до глибшої розмови. Також зверніть увагу, як Сара використовує технічний термін - “агресивно запам’ятовувати” - що підступно означає, що вона розглядає, чи може підхід бути * занадто * ревнивий, що спонукає Джона виправдати своє рішення. Аналогічно, посилання на «майбутніх супроводжувачів» підкреслює довгострокові наслідки коду і заохочує більш глибокий погляд.

Інший приклад: Розмова на Slack між двома інженерами, які обговорюють оновлення PR: «Марк, я дивлюся на цю зміну і здається, що ви сильно покладаєтеся на компілятор React, щоб уникнути перерахунку totalPrice в компоненті кошика. Це розумно, але чи можемо ми дослідити, чи буде достатньо більш цілеспрямованої стратегії запам’ ятовування - можливо, тільки для * початкового * обчислення? Ми хочемо уникнути непотрібних витрат, не жертвуючи продуктивністю. ” Ця фраза зосереджена на запропонуванні альтернативного підходу, а не просто на заяві, що поточний метод є « неправильним ». Це про спільне вирішення проблем.

Ось простий приклад того, як можна використовувати компілятор React у цьому контексті, демонструючи основну концепцію:

react compiler --analyze shoppingCartComponent.jsx

Ця команда (гіпотетична, для ілюстрації) виведе аналіз, що показує потенційний вплив продуктивності і пропонує стратегії оптимізації, засновані на принципах алгоритму Forget - ідентифікація даних, які малоймовірно змінюватися часто і відповідно до них. Звіт може підсвічувати певну рядок коду, наприклад calculateTotalPrice(), і пропонує: “Запам’ятайте результат цієї функції, якщо кількість продукту і ціни не очікуються зміни протягом життєвого циклу компонента.”