tgoop.com/startpoint_dev/62
Create:
Last Update:
Last Update:
🚀 React Compiler
Сегодня разберем новый экспериментальный компилятор от команды React — React Compiler. Этот компилятор призван улучшить производительность приложений React, оптимизируя их на этапе сборки. Пока он еще в стадии разработки, но уже доступен для тестирования.
Особенности
- Работает с обычным JavaScript и следует правилам React, что позволяет использовать его без переписывания кода.
- Включает в себя плагин eslint, который помогает улучшить качество кода, показывая анализ компилятора прямо в вашей IDE.
- Поддерживает React 19 RC.
Как это работает
React Compiler помогает ре-рендерить компоненты только там, где это действительно необходимо. Например:
import { useState } from 'react';
function Button({ title }) {
console.log('[Button] Render');
return <button type="button">{title}</button>;
}
function Form() {
const [name, setName] = useState('');
const handleChangeName = (event) => setName(event.target.value);
console.log('[Form] Render');
return (
<form>
<input name="firstName" value={name} onChange={handleChangeName} />
<Button title="Ok" />
</form>
);
}В стандартной ситуации, каждое изменение в input приводит к перерендеру кнопки в форме. Чтобы избежать этого раньше нам пришлось бы обернуть этот компонент в React.memo(). Однако, с React Compiler компонент Button будет перерисовываться только когда это действительно требуется, благодаря автоматической мемоизации.
🔗 Полезные ссылки:
- Плагин для eslint
- Подключение к проекту с помощью babel-плагина
- Пример использования в проекте на vite можно найти в нашем репозитории на GitHub
Это звучит как магия, и я, если честно, не до конца верила, что такое может работать, но оно действительно работает!)
BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/62