Улучшаем перфоманс без memo() || Советы от Дэна Абрамова

[@lightinthedark5708]

Спасибо, декомпозиция наше всё.

[@jses8560]

Жду с нетерпением новое видео по React от вас, спасибо!

[@it-sin9k]

Приятно такое слышать) значит будем готовить новое видео)

[@Sergey-lg1ke]

Потратить четыре минуты и получать столько пользы, не помню когда последний раз такое было. Надо чаще смотреть твой контент)) Спасибо большое!

[@it-sin9k]

Спасибо большое! Очень приятно читать такие комментарии!

[@Quentinrei]

Круто, очень круто 🎉🎉🎉

[@maria-kuznetsova-s]

> Если рендерится компонент, у которого есть children, это не заставляет рендерится children Даже не задумывалась об этом. Спасибо за полезную информацию, как всегда великолепно!

[@it-sin9k]

рад быть полезным)

[@eugeniyvinnikov5480]

Все гениальное просто.... действительно. Скорее новое видео, новую тему, новый разбор ))

[@it-sin9k]

следующее видео уже на подходе)

[@prog-hak]

Радует, что синяк - производное от синий, а не от алкоголизм))) Классный ролик!

[@it-sin9k]

ахаха) маркетинг наше все))

[@АнатолийГорбов-о1ь]

Мега полезные видео на канале! Спасибо))

[@valeriipimenov4894]

Ты красавчик! Классный контент)

[@it-sin9k]

Спасибо!)

[@Vlad-yj2ny]

Спасибо большое, вы очень помогаете)

[@it-sin9k]

Это и есть цель нашего канала) Если и вы хотите нам помочь, тогда поделитесь этим видео со своими коллегами или в социальных сетях)

[@CELTRIX88]

Класс! )

[@mykhailostepanishchev6472]

Супер! Спс

[@WebDev_51]

Круто очень 🎉❤😅

[@Grey8260]

Вот это поворот! Спасибо!

[@Infinity-zf8ms]

Спасибо

[@ИванИванов-у3ч4м]

Очень кртуые видосы, топи дальше!

[@alexanderzharkov6953]

Огонь!

[@Ramosok]

Супер!!!

[@romangoncharuk4455]

спасибо!

[@alekseyleha9942]

Радостный как трамвай, спасибо

[@metakirin8710]

Забавно вышло, если объединить этот и предыдущий ролики: если перерендериться родитель, то его дети - нет и наоборот (из прошлого ролика), если перерендеряться дети, то родитель тоже из-за новых инстансов в массиве детей. Спасибо🐼

[@bakaleisanich]

Пасиб

[@ilikecola378]

Лайк за интересное видео

[@dm.hol.3624]

Сначала я не понял. Потом попробовал понять, но не понял снова. А щас каааааак понял! Благодарю. P.S.: Рассказал о канале коллегам.

[@it-sin9k]

ахаххаха) P.S. Низкий поклон!)

[@kirillskomarovskiy2490]

Второй вариант не работает как первый. Т.к color передавался в стили p, а во втором варианте передаётся в стили div в компоненте ColorPicker.

[@it-sin9k]

там можно все подтюнить, чтобы работало, я просто оставил как в оригинале было у Дена. Но в докладе например, я поднимал эту же тему и сделал в двух примерах код абсолютно одинаковым :)

[@aidosbatyrkulov3272]

react не ре-рендерить только children или все компоненты которые были отрисованы через переменные ?

[@it-sin9k]

Ответ: все компоненты, которые были отрисованы через переменные. Специально даже перепроверил, перед ответом, вот такой код . А внутри Wrapper вставил счетчик и {variable}{children}. В итоге при рендере Wrapper-а ни children, ни variable не рендерились :)

[@aidosbatyrkulov3272]

Круто, спасибо большое. Ценю это

[@lukyanenkomikhail7459]

отличный материал как избежать лишних вызовов компонент без использования memo React.memo. Отзыв кривой, но роботам такое нравится )

[@roman65ge5T]

Top

[@LRXAORLOV]

Ок, понял) если перерисовался родитель, то и дети тоже перерендериваются) забываем такое правило) Главное чтобы читаемость от такого не страдала

[@it-sin9k]

верно) connect немного атрофировал, эту идеологию в наших умах)

[@ReAgent003]

@@it-sin9k Если родитель перерисовался, то и дети тоже? Но на 2:28 внутри компонента перерисовывается инпут, верно? То есть , как родитель инпута, тоже должен это сделать? Если да, то почему снова весь с не перерендерился?

[@it-sin9k]

@@ReAgent003 Компоненты начинают перерисовываться, только с той ноды, на которой произошли изменения. В нашем случае с компонента Form и ниже. Такова идеология Fiber архитектуры

[@Владимир.П-е9о]

А разве не правильнее сложную логику в эффекте с пустыми зависимостями писать? Так и в SSR этот код не будет выполняться, и при каждом рендере тоже. Просто оставлять такой компонент в общее использование опасно, ведь кто-то другой не станет также делать враппер. Возможно я не так понял пример с while

[@it-sin9k]

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

[@Владимир.П-е9о]

@@it-sin9k а какая логика может быть в рендере? Если обработка данных, то тоже в эффекте с зависимостями на эти данные. Если работа с свойствами, вызывающими reflow, то тут точно нужен useEffect, т.к. нужно явно ограничить частоту вызова, да и в эффекте не случится кирпич приложения в ssr. В рендере слишком хрупко получается, особенно, если потребуется в процессе работы вызвать callback или изменение стейта (можно попасть на цикличный рендер). Мне просто даже в голову не приходило никогда решать такие проблемы через мемо, т.к. эффекты как раз для таких штук нужны. Я на кодревью часто прошу убрать из рендера тяжелую логику в useEffect или useMemo (если она тяжелее меморизации и не часто должна вызываться), поэтому спрашиваю, вдруг я неправ был все это время :)

[@it-sin9k]

вы говорите только лишь о том, что на очередном рендере можно избежать, чтобы лишний код не вызвался, т.к. у того же useEffect зависимости не изменились. А как же вызов самой функции компонента, все что в return у вас лежит будет отправлено на превращение из JSX в Fiber node. Все хуки которые в этом компоненте, например тот же useEffect проанализируются, что не надо им отрабатывать, т.к. зависимости не изменились. А если у вас есть селекторы какие то, сходить в redux объект данные забрать или взаимодействие с контекстом или еще чем, то тоже это произойдет. Суть в том, что рендер компонента, это сама по себе затратная функция, хоть пользователь глазом и не увидит, что там лишнее, что-то зарендарилось. А пример с while, это лишь для наглядности, чтобы вы разглядели проблему. И поняли, что можно написать лучше.

[@-X-Ray-]

Прикольное решение, но такое ощущение, что в силу лени разработчиков, большинство просто обернёт последний компонент в memo, ибо быстрее)

[@it-sin9k]

думаю да) но возможно хоть пару десятков людей изменит свой подход к архитектуре компонентов, это будет уже победа для такого маленького видосика)

[@-X-Ray-]

@@it-sin9k один маленький шаг для видосика и большой шаг для всех просмотревших)

[@Ruzakisan]

мораль - учите SOLID.

[@kinderhero8897]

+

[@Изучение-з9п]

пздц, 10 дней назад на собесе за это говно спрашивали

[@it-sin9k]

ахахах) видимо тоже видео посмотрели))

[@Изучение-з9п]

@@it-sin9k ага, а чел выдавал мол он это сам придумал...

[@it-sin9k]

@@Изучение-з9п не очень добросовестный товарищ :)