Заметки про React: “Использование React Compiler на реальном проекте В своем блоге Надя Ма…”

Использование React Compiler на реальном проекте

В своем блоге Надя Макаревич рассказала об опыте использования React Compiler на нескольких реальных больших проектах.

При тестировании на небольших примерах React Compiler справляется хорошо, может мемоизировать разные сценарии:

- мемоизация компонента без пропсов;
- мемоизирует пропсы для компонента через useCallback, useMemo;
- мемоизирует дочерний компонент через useMemo;


const VerySlowComponentMemo = React.memo(VerySlowComponent);

export const SimpleCase3 = () => {
  const [isOpen, setIsOpen] = useState(false);

  // мемоизация дочернего компонента через useMemo
  const child = useMemo(() => <SomeOtherComponent />, []);

  return (
    <>
      ...
      <VerySlowComponentMemo>{child}</VerySlowComponentMemo>
    </>
  );
};

Однако реальные проекты гораздо сложнее чем эти примеры и в них больше разных сценариев. При установке React Compiler на три разных проекта компилятор в каждом из проектов исправил только 2 из 10 проблемных рендера.

Чтобы исправить остальные проблемные рендеры, пришлось вручную исправлять код компонентов. Например:

- деструктуризировать mutate из useMutation и использовать его в коде напрямую;
- выделить часть кода в отдельный компонент;
- в цикле изменить key с index на name.

https://www.developerway.com/posts/i-tried-react-compiler