ПостКак React Compiler работает с реальным кодом

Как 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