🔥 Реактивный компилятор

Фронтенд часто является предметом шуток на тему инструментов, которые появляются чаще, чем используются. Но несмотря на то, сколько инструментов существует, серьёзная разработка всё ещё отдаёт предпочтение большим игрокам.

Одним из самых популярных фронтенд фреймворков является React. Что же поддерживает его статус "царя горы"? Как минимум, крутые возможности, упрощающие разработку. Одно из таких - React Compiler.

Это новый инструмент сборки, который оптимизирует ваше React-приложение с помощью автоматической мемоизации. Что же здесь революционного?

Посмотрим на вот такой фрагмент кода:

import { useMemo, useCallback, memo } from 'react';  

const ExpensiveComponent = memo(
  function ExpensiveComponent({ data, onClick }) {  
    const processedData = useMemo(() => {  
      return expensiveProcessing(data);  
    }, [data]);  

    const handleClick = useCallback((item) => {  
      onClick(item.id);  
    }, [onClick]);  

    return (  
      <div>  
        {processedData.map(item => (  
              <Item 
                  key={item.id} 
                  onClick={() => handleClick(item)} 
              />  
            )
        )}  
        </div>  
    );  
  }
);

Этот React-компонент использует:
- useMemo - хук, позволяющий мемоизировать вычисления в компонентах. Если входные зависимости не менялись, то ранее сохранённое значение вернётся без вычислений;
- useCallback - хук, позволяющий мемоизировать функцию между вызовами компонента. Если зависимости не менялись, то между рендерами возвращаемая функция не поменяется;
- memo - функция, позволяющая избежать повторного рендеринга компонента, если его зависимости не поменялись.

Все эти возможности оптимизации при использовании React Compiler просто не нужны! Тот же фрагмент кода при использовании React Compiler выглядит так:

function ExpensiveComponent({ data, onClick }) {  
  const processedData = expensiveProcessing(data);  
  const handleClick = (item) => {  
    onClick(item.id);  
  };  
  
  return (  
    <div>  
      {processedData.map(item => (  
        <Item 
            key={item.id} 
            onClick={() => handleClick(item)} 
        />  
    ))}
    </div>  
  );  
}

React Compiler автоматически оптимизирует всё для избежания лишних перерендеров. useCallback, useMemo или memo всё ещё можно использовать, но уже в тех случаях, где необходима ручная мемоизация.

С октября 2025 года React Compiler является стабильным и его уже можно использовать в реальных проектах.

В теории всё звучит круто, но лично мне только предстоит React Compiler попробовать. С момента релиза так и не добрался до того, чтобы попытаться перенести какой-нибудь пет-проект на новомодный инструмент.

🎤 feelin