Прекрати использовать useMemo! Топ ошибок Junior/Middle/Senior React-разработчиков

Излил там всю боль и показал на реальных примерах из предыдущих работ и нынешней, как неправильно юзают хук useMemo

⏰ Таймкоды:
00:00:00 Начало

Плохие примеры:
00:00:31 Первый
00:02:18 Второй
00:03:58 Третий
00:04:53 Четвертый
00:05:21 Пятый
00:05:37 Шестой
00:06:12 Седьмой

00:09:30 Подводим итог

Обязательно посмотрите эти два видео:

🔗 Следите за обновлениями и информацией в:

#react #usememo #reactmemo #memo #perfomance #jsperf #производительность #оптимизиация #мемоизация

[yuripolyantsev]

"Возможно, самая распространенная ошибка умного инженера - оптимизировать то, чего не должно существовать" - Илон Маск

[aeron_rus]

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

[uotgtkj]

Коммент для развития канала и персональной благодарности Дэну! Лайк - авансом.

[dimaxMedia]

Почему так редко видео выходят, у тебя подача просто огонь, мозг прям сам запоминает твою информацию, обращение типо "ты понял" мне заходит сразу)) Хочется больше видео как минимум часовых и более

[veli]

Что конкретно ты хотел проверить в Example1 (2:57)? Какая там могла быть разница, если ты рендерил оба варианта всего один раз? Разумеется, вычисление что с useMemo, что без него будет выполняться при первом рендере и время рендера будет +- одинаковым. Уже со второго рендера можно было бы проверять разницу - в компоненте с useMemo результат взялся бы из кеша, а в компоненте без useMemo вычислялся бы заново

[gameit]

Нормально объяснил! Красава! Надеюсь, боли станет меньше

[hgscyit]

А стоит ли использовать юс мемо если например есть какие-то данные в переменной и из-за обновления пропсов происходит перерендер компонента и эта переменная с данными пересоздается лишний раз. А у нас на неё хук юс эффект навешен, например. Тогда юзать мемо ок?

[AndreiShchetkin]

3:20 Ты сравниваешь рендер с вычислениями, но фишка хука в мемоизации, а ты показываешь разницу на холодную загрузку

И еще, из документации:
If the overall logged time adds up to a significant amount (say, 1ms or more), it might make sense to memoize that calculation

[janedow]

оправдано ли использовать usememo для хранения найденного товара в корзине(500 товаров)? хотя без usememo не тормозит, но на всякий случай спрашиваю, вдруг операция поиска дорогая

[natanrock]

@Archakov Blog, привет, можешь по-братски фиксануть демо pizza 2? Спасибо большое!

[gravedigger]

На мой взгляд упущено несколько важных деталей использования мемоизации от реакта*
1. PureComponents / React.memo() - Пропс пассинг в таких компонентах должен быть мемоизированным, в противном случае это просто не будет работать.
2. Почему то не учитывается сложность по памяти, ведь создание уймы ссылок на обьекты при вызове компонента так же не есть хорошо.
3. Использование мемоизации в больших контроллерах контекста или компонента (либо контейнерных компонентах)

[whiky]

Многие забывают что результат кеширования и так надо где-то хранить, и оборачивать все в useMemo это только нагрузка

[artars]

Автор, а пробовал ли ты в не пет проекте с большИм деревом вложенных компонентов сделать банальный console.log где то в глубине? Сколько будет его вызовов? Даже простые операции при большом их количестве будут существенно влиять на производительность. useMemo это способ заплатить озу вместо цпу. Так же странно что автор не видит смысл когда в deps передаётся не все что используется внутри хука. Вероятно результат не должен зависеть от того что не в deps, не?

[aslanator]

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

[never.mnd]

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

[akichula]

5:40 в example6.jsx интересный момент:
useMemo не просто бесполезен, в данонм случае он будет делать лишние рендеры компонента Header и div с children'ом, т.к. обновление идёт по userData. При этом если мы просто поместим этот же код (без фрагментов) на 21 строку, обновляться в случае изменения userData будет только один компонент Profile, что логично ведь это его пропс

[ValdemarPetrovich]

Так: второй пример разберем. Сравнение, как мне кажется не корректное: нужно посмотреть сколько займет рендер компоненты с юз мемо, если ее вызовут второй и последующие разы с теми же параметрами. По идее в разы меньше, так как не будет вычисления. Если это бизнес кейс, то оптимизация нужна, нет?

[AmericanDragon]

планируешь-лы видос про SEO optimization, Google search console

[it-kachalka]

Может быть, это прозвучало в видео и я не заметил, но один из самых действенных способов это спросить себя: "выиграем ли мы от использования useMemo, с учетом, что нам нужно на каждый цикл (1) произвести вызов функции (это медленнее большинства операторов), (2) аллоцировать место под массив и заполнять его значением (послений аргумент useMemo)" – и если человек хоть сколько то понимает что такое память и принцип вызова функций, он достаточно просто сможет принимать решение о том нужно ли использовать useMemo

[pahakush]

React конечно хорошо, но как насчет Flutter? Не планируешь чего-то нового?