На этой неделе вышла beta-версия React Compiler!
Бету анонсировали на конференции React India. Там же рассказали о нововведениях инструмента. Ниже вкратце перечислю основные изменения:
- Поддержка старых версий React: теперь React Compiler может работать не только с несуществующей 19 версией React, но и с вполне живыми 17 и 18 версиями!
- Доработан Eslint plugin: он поможет обнаружить нарушения Rules of React в вашем коде;
- Улучшена поддержка TypeScript
- Докрутили алгоритмы мемоизации: обещают, что новая версия Compiler будет точнее определять, какие переменные должны измениться, чтобы мемоизированная логика выполнилась заново.
- Пообещали автоматический рефакторинг компонентов: Compiler не всегда справляется с нашим кодом и не всегда даёт прирост производительности — об этом подробно писала Nadia Makarevich в своей статье. Так вот, якобы, Compiler скоро сможет сам рефакторить наш код, если текущая композиция компонентов не позволяет ему оптимально оборачивать переменные в useMemo.
И если было у вас, например, вот так (почему-то):
const styles = useStyle();
const items = useMemo(() => people.map((id, name) => (
<li key={id}>
<Text name={name} style={style} />
</li>
)), [people, style])
То компайлер возьмёт и сам вынесет этот <li> в отдельный компонент и применит к нему своё memo(), чтобы не перерисовывать все <li>, когда в массив people добавится новый элемент.
Правда, пока это только экспериментальная фича под флагом. Под каким флагом — не сказали))
Но я сам нашёл: environment.enableJsxOutlining
Вот выйду из отпуска и попробую потестить))