🚀 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

Это звучит как магия, и я, если честно, не до конца верила, что такое может работать, но оно действительно работает!)