Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Использование 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
29 · 3.2K ·