Когда применять React.memo? Оптимизации в React

В общем и целом, React быстрый, если придерживаться его best practices и в нужных местах применять оптимизации при помощи React.memo.

Хочу поговорить про этот React.memo, потому что штука очень важная и я ее в последнее время часто применяю. Если кто не знает, то React.memo автоматически проверяет, изменились ли пропсы. И если они не изменились, то React не вызовет ререндер и вернет результат прошлого рендера.

Тут необходимо придерживаться нескольких рекомендаций. Их стоит применять, когда у вас большая компонента, много лишних ререндеров, визуально медленно работает интерфейс.

1. Первым делом нужно посмотреть, можете ли вы вынести состояние в другую компоненту или разбить основную компоненту на подкомпоненты.
2. Если после того, как вы разбили компоненты, у вас проблема с лишними ререндерами не решилась (либо решилась частично), то стоит применить React.memo.

Тут нужно помнить, что если вы оборачиваете компоненту в React.memo, то обязательно стоит смотреть на тип данных пропсов. Если все пропсы примитивы, то оборачиваем спокойно.

Если какие-то пропсы являются объектами и (или) функциями, то значения этих пропсов необходимо обернуть в useMemo и useCallback соответственно. Если вы этого не сделаете, то React.memo уже не будет выполнять свою главную функцию. Конечно, если ваше значение имеет тип данных объект и хранится в useState, то ничего в useMemo оборачивать не нужно.

А вы используете React.memo в своем коде? 😏