Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Как React Compiler работает с реальным кодом
В своем блоге Надя Макаревич изучила влияние React Compiler на начальную загрузку и производительность реального приложения.
В итоге оказалось, что React Compiler как минимум не ухудшает, но чаще улучшает начальную загрузку и производительность приложения. Однако компилятор не обрабатывает все случаи ре-рендера, поэтому если хотите лучшую производительность, то полагаться на работу только React Compiler не получится. Придется некоторые кейсы оптимизировать самостоятельно. В целом React Compiler оптимизирует приложение достаточно хорошо.
Один из примеров, которые потребовал самостоятельной оптимизации. На странице рендерился список карточек:
// somewhere before
const GalleryCardMemo = React.memo(GalleryCardMemo);
// somewhere in render function
{data?.data?.map((example) => {
return (
<GalleryCardMemo
href={`/examples/code-examples/${example.key}`}
key={example.key}
title={example.name}
preview={example.previewUrl}
/>
);
})}
Объект data приходил из запроса React Query, а проп preview был объектом. Когда в запросе React Query изменялся набор параметров, то возвращался другой объект data. Даже если объекты карточек внутри массива одинаковые, то все равно происходит ре-рендер компонента GalleryCardMemo из-за того, что проп preview объект. Чтобы решить проблему, надо проп preview разделить на несколько пропов-примитивов. Например:
{data?.data?.map((example) => {
return (
<GalleryCardMemo
href={`/examples/code-examples/${example.key}`}
key={example.key}
title={example.name}
// pass primitives values instead of the entire object
previewLight={example.previewUrl.light}
previewDark={example.previewUrl.dark}
/>
);
})}
https://www.developerway.com/posts/how-react-compiler-performs-on-real-code
34 · 3.5K ·