Всем привет!

Сегодня хотел бы поговорить про полную мемоизацию всех колбэков в компонентах и поделиться своим мнением по данному вопросу.

Для тех кто не слышал, часто в проектах бывает такой конвеншен, когда все пропсы нужно обязательно мемоизировать, прежде чем передавать в компонент ниже.

Я когда в первый раз увидел такие договоренности на проекте, то был очень удивлен. Ведь в большинстве случаев рендер компонента и так быстрый, а мемоизация добавляет сложности с актуализацией депсов в useMemo/useCallback.

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

Самый очевидный наверное в том, что есть какой-то стандарт в проекте. Нету лишних комментов на ревью о ненужном useCallback. Также не идут споры о том, стоит ли что-то мемоизировать или нет.

Еще одним из плюсов является то, что некоторые пропсы могут быть переданы вниз на много уровней, и не всегда ты можешь узнать используется ли memo где-то внизу дерева, либо используются ли эти пропсы в качестве депсов для колбэков или эфектов ниже.

Поэтому мое мнение по данному вопросу перестало быть настолько однозначным. На самом деле, я думаю что на большом проекте, где есть много разработчиков разного уровня и у многих из них нету глубокого понимания React, данный подход будет полезен.

А в других случаях я бы предпочел все равно использовать мемоизацию только там, где это нужно. Можно придерживаться таких правил:
- Мемоизируем все пропсы для компонентов из внешних библиотек (если точно не знаем, что там внутри).
- Мемоизируем пропсы для компонентов, которые используют memo.
- Если есть пропсы откуда-то с верхнего уровня и они не мемоизированы - можно использовать useEvent/useLatest для того, чтобы избежать лишних обновлений.

Также хотел бы отметить, что если уж и мемоизировать все подряд, то намного проще использовать самописные хуки useEvent и useLatest, так как большинство колбэков вообще никогда не должны обновляться.

#devtips #react #hooks