Archakov DennisArchakov Dennishttps://teletype.in/atom/archakov2026-04-15T17:02:26.401Zarchakov:LQV8ByNUDКогда необходимо использовать React.memo и PureComponent?2021-03-28T10:36:48.786Z2021-03-28T10:57:21.433Z<img src="https://teletype.in/files/32/18/32184c81-70fe-4365-9022-b54a7fcda56a.png">Когда у вас возникнет сомнение, достаточно ли хорошо вы оптимизировали ререндер компонентов с помощью React.memo() или shouldComponentUpdate, просто помните, что Instagram плевал на ваши реакт мемы и прочие способы оптимизации ререндера (см. на рисунок статьи).
<figure class="m_original">
<img src="https://teletype.in/files/32/18/32184c81-70fe-4365-9022-b54a7fcda56a.png" width="1015" />
</figure>
<p>Когда у вас возникнет сомнение, достаточно ли хорошо вы оптимизировали ререндер компонентов с помощью React.memo() или shouldComponentUpdate, просто помните, что Instagram плевал на ваши реакт мемы и прочие способы оптимизации ререндера (см. на рисунок статьи).</p>
<p>Все эти зелёные квадратики - <strong>компоненты</strong>, которые делают ререндер при нажатии на логотип инстаграма и даже при сужении окна.</p>
<p>Один из "страшных" снов реакт-разработчика - бесполезный ререндер компонента. Разработчик неистово пытается бороться с этой "проблемой", оборачивая с помощью React.memo() или PureComponent (shouldComponentUpdate), в надежде на то, что компонент перестанет делать ререндр, когда этого не требуется.</p>
<p>Согласен, делать перерисовку компонента даже тогда, когда в нём ничего не изменилось, не очень то и здорово, но и ничего страшного в этом нет 🤷🏻♂️</p>
<p>Даже если ничего не изменилось (просы, стейт), а вызов на ререндер у компонента всё равно произошёл, React не будет перерисовывать что-то в DOM-дереве, <a href="https://ru.reactjs.org/docs/rendering-elements.html#react-only-updates-whats-necessary" target="_blank">если VDOM не даст на это добро</a>. </p>
<p>Дорогостоящей операцией в React является <strong>не повторный вызов компонента</strong>, а <strong>изменение чего-то в DOM-дереве</strong>.</p>
<p>В качестве примера, я сделал <a href="https://stackblitz.com/edit/react-5h34zs?file=src%252FApp.js" target="_blank">очень простую демку</a>.</p>
<p>Если в компоненте "<strong>А</strong>" нажать на "+", перерисовку будут делать компонент "<strong>B</strong>" и "<strong>C</strong>", так как родительский компонент "<strong>А</strong>" был повторно вызов из-за изменения счётчика. В консоли вы увидите сообщение при каждом повторном рендере.</p>
<p>Но если компонент "<strong>C</strong>" обернуть с помощью <strong>React.memo</strong>, то в консоли не будет сообщение о том, что данный компонент сделал ререндер, даже если счётчик обновился.</p>
<p>Выглядит круто, не правда ли? Мы ведь избавились от лишнего ререндера! Ноооо </p>
<figure class="m_custom">
<img src="https://teletype.in/files/9d/c2/9dc2f19d-61c8-43fe-b541-1a94071c7bf9.png" width="600" />
</figure>
<p>Обернув компонент "<strong>С</strong>" с помощью React.memo, мы не решили никакую проблему, а наоборот, добавили лишнюю логику, которая будет выполняться при каждом вызове компонента "<strong>С</strong>". </p>
<p>То есть, при изменении счётчика в компоненте "<strong>А</strong>", компонент "<strong>С</strong>" будет вызываться всё равно, но теперь ещё с дополнительной логикой проверки, которая ему в принципе была не нужна, так как он просто отображает какую-то вёрстку.</p>
<p>React.memo или PureComponent необходимо использовать только в том случае, если вы реально столкнулись с проблемой, которая заставляет тормозить ваш UI или выполняет лишнюю логику.</p>
<p>В <a href="https://ru.reactjs.org/docs/reconciliation.html" target="_blank">этой статьей</a> подробно объясняется, как происходит согласование перерисовки компонентов.</p>