Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React

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

Крутая тема, крутое видео! Хуки и реакт вообще больная тема для меня, слишком много ошибок в них делают разработчики, причем любого уровня. Есть еще проблема про меморизацию компонента с children, про это многие забывают. Если передать обычный jsx в children компонента обернутого в memo, то на каждый рендер будет вызываться createElement для этого children, а createElement каждый раз создает новый объект, из-за чего меморизация ломается и добавляет лишний вред для производительности вычислениями меморизации. Еще в контекст многие любят передавать объект, ломая перф всего приложения одной строчкой. Очень круто, что вы поднимаете такие темы.

[@webelart]

Спасибо за комментарий и за дополнение про children. Закрепляю!

[@sergeys4732]

Так объект можно в useMemo завернуть) не ломая перф никакой

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

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

[@cybersystem5137]

@@Владимир.П-е9о ога, ну или вынести объект за пределы компоненты и угомониться. Потому что тут он константный.

[@enjoymtx]

Какую хорошую вы проделали работу с этим уроком, браво!

[@dr_morpho]

Как у вас лампово и на лайте, никакой душноты, успехов вам)

[@webelart]

😘 Спасибо!

[@theoty-js]

да, и разбор деталей и погружение в технические моменты, нравится мне изучать React вместе с Еленой и ее эмоциями))) Уникальность и оригинальность чувствуется!

[@МаксимБондаренко-у3о]

Феминизация слова "компонент" прошла успешно

[@webelart]

КомпонентА ❤

[@АлександрКас-н7з]

ахахахах)мне тоже слух прям режет)

[@k0repan0ff]

Спасибо! Очень доходчиво и понятно все объяснено. Приятно смотреть.

[@webelart]

Я очень рада! 😍☺

[@theoty-js]

Клёво, что умеешь эмоции включать, так милее уроки получаются) буду изучать хуки, а то пока что знаю о таких как UseEffect и UseState, этого явно маловато ;) благодарю милая)

[@webelart]

☺️ круто! Спасибо!

[@thedeadman1607]

Спасибо за видео! Первое видео, в котором наглядно и понятно объяснили в чём разница между useMemo, useCallback и React.memo. Особенно между useMemo, useCallback.

[@frontendmaster_7]

Спасибо за объяснение нюансов, ни у кого такого не слышал. Сам не сильно люблю использовать useMemo, так как сложно понять где он нужен а где нет. Но после видео теперь понял, где его можно юзать и как.

[@sako1313]

Спасибо за такое видео, я сколько видео посмотрел по useMemo и по useCallback не понял, а тут прям все понятно, и весь ролик я так кайфовал, как будто АСМР смотрю)))

[@muslimm3027]

Спасибо Елена, заслуженный лайк и подписка)) просмотрел кучу видео на эту тему, но так доходчиво еще никто не объснял

[@SergeyDon]

Просто огонь! Просто топ! Как все легко и структурно. Задолбался выковыривать инфу про эти хуки. Везде вроде и по делу и в то же время непонятно, что, когда и где пользовать. Спасибо!

[@Mikhail.tortik001]

Оооооооо, тема с useMemo и React.memo это топ. А то в инэте в основном инфа по useState и useEffect) Спасибо большое, жду видос про tsconfig.json😄😄

[@webelart]

Будет следующим видео! ❤

[@soldatov_ss]

Это было исчерпывающее видео, очень круто что разжевали все подробно и все подводные камни изучили. Прям основательный подход Посреди видео поставил лайк и подписался. Зачет

[@midlton555]

Огромное спасибо! Я сидел с этими темами 4 часа.

[@sergsvl]

Лена, спасибо за разбор работы мемоизации! Я благодаря ему смог разобрался в реальном проекте с проблемой переключения двух компонентов в табах. У тебя такой ситуации не показано и поэтому я долго исследовал исходник либы Antd и код кастомных табов, у нас на проекте, и не мог понять, почему useMemo не работало. Я и пропсы в компоненты отключил и в useMemo обернул, но они перерисовываются при каждом переключении табов и все тут. Но они же, и спропсами, в ANT'e прекрасно мемоизировались. Т.е. отрабатывали по первому разу, а потом брались из кэша. А проблема была в том, что эти компоненты заменяли друг друга в ДОМ при каждом переключении кастомных табов, т.к. брались из пропса (но это не важно в целом). И решение здесь только одно - монтировать в ДОМ сразу оба компонента (при этом они инициализируются тоже оба), а потом переключать их табами через смену стилей: display: none/block. И тогда они рендерятся заново только при реальной смене их собственных пропсов. Твой же компонент FactorialCalculation один раз монтируется в шаблоне и по нажатию на кнопку не удаляется, и поэтому useMemo для него работает. Но результат для меня очень радостный по итогу :))

[@awesomexe]

Обалденный контент. Спасибо! Жаль раньше вас не нашел

[@custercuster4918]

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

[@DevAccount-rq4ni]

Супер классное понятное объяснение!! Елена спасибо огромное, крутая подача, продолжайте в том же духе 🔥

[@albinasenkova8972]

Елена, спасибо огромное! Лучшие видео-лекции про веб ❤

[@webelart]

❤❤❤ Я рада, что материал полезен!

[@viktorgusev3701]

Круто, смотрю третье видео перед подготовкой к собесам. Спасибо )

[@ПожилойФронтендер]

Спасибо Елена, все круто и понятно, мне понравилось, подписка! Успехов и удачи!!)

[@MaxShilov]

Очень доходчиво объяснила 🔥 Елена, огромная тебе благодарность 🤟🏻

[@sergsvl]

Подача, как всегда - волшебно! :)))

[@pherum]

Какая же ты крутая, Лена!

[@webelart]

☺❤

[@bczya1]

Спасибо рекомендациям за ваш канал)

[@ЕвгенийНагаев-п9ч]

Учу реакт, но ещё не дошёл до этих хуков, изучаю useState, useEffect, use Context. Не смотря на это Лена рассказала очень понятно про useMemo, useCallback и reactMemo. Спасибо за ценную информацию)

[@vladimirglazkov7960]

Елена все краше и краше с каждым видео😊

[@webelart]

😍 Спасибо!

[@rasul7702]

Спасибо большое, наконец то я понял эти два хука

[@RedShucov]

Спасибо большое за видео, очень нравится ваша подача и позитивное настроение Желаю побольше просмотров и развития каналу, вы классная :)

[@NikGameChannel23]

Спасибо большое Елена, вчера из-за этой оптимизации провалил свой первый собес, а нужно было всего лишь раньше посмотреть ваш ролик и ответить правильно на собеседовании :(

[@АлександрКасатов]

function sleep(ms) { const timeNow = Date.now(); while (timeNow + ms >= Date.now()); } Такая штука позволяет более наглядно имитировать тяжелые вычисления.

[@webelart]

Крутой пример!

[@benchik100]

thanks

[@damskylizi7532]

лайк, репост, комментарий для продвижения в топ!

[@webelart]

❤❤❤

[@murcha5899]

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

[@ledof4]

Спасибо за разъяснение, помогло!

[@RamaRama-qv3jo]

Спасибо, очень доступно для понимания !

[@ruslanstupak7625]

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

[@webelart]

Спасибо за комментарий! Я стараюсь, стараюсь ребята! 😘❤️

[@ruslanstupak7625]

А ещё очень бы хотелось увидеть именно в твоей подаче видео по настройке вебпака или tsconfigа. Если будет возможность, сделай пожалуйста, буду ну очень тебе благодарен, та и люди, которые тебя смотрят, наверняка тоже обрадовались бы такому материалу

[@ЭльнараГайнанова-ф3к]

Жалко, что нельзя поставить млн лайков ❤

[@webelart]

Спасибо большое!!! ❤❤❤ Рада, что контент нравится! 🥰

[@miloman1995s]

после слов будем использовать хуки useMemo, useCallback и REACT.MEMO...... REACT.MEMO Карл, реакт мемо - это хук , Карл... захотелось выключить) надеюсь оговорка, щас посмотрим дальше

[@catsoftheworld]

Умничка! Спасибо за видео❤

[@ИгорьГреков-я6в]

спасибо за урок и хорошее настроение)

[@webelart]

Пожалуйста! 🥰❤ Рада, что урок понравился!

[@VolhaValaskevich]

Спасибо большое!!! Супер!

[@nth-prog8562]

Что может быть лучше, когда красивая женщина учит тебя как пользоваться своим инструментом)

[@angelicoctahedron3646]

Что может быть лучше? Ну вот миллион долларов, например, лучше.

[@top-mma-news]

Интересно было послушать, благодарчик

[@MrCortc]

0:00 Я тоже в свое время плакал когда все это изучал и наконец разобрался... Какими же дегенератами надо быть чтобы все так запутать. Нам рассказывают какой реакт классный и быстрый... Но когда ты сталкиваешься с реальностью на боевых проектах. Когда у тебя нет выхода кроме как поддерживать распиаренные плагины типа formik, в котором на серьезных формах с валидацией начинает тормозить обычный ввод текста в инпут, и ты понимаешь, что ничего сделать не можешь, потому что изначально архитектура этих решений такая...

[@MisaNia25]

Классно развиваетесь

[@MukhammadAkilov]

Спасибо за видео, все круто и информативно! Единственное, в некоторых местах советуют не класть компоненты в служебную папку pages в Next.js)

[@webelart]

Вроде туда только стили положила. Вообще да, это же папка для роутинга

[@webelart]

@@ReAgent003Эх, пока в Лондоне. Но Яндексу сердечки! ❤

[@aximas778]

useMemo - я использовал когда создавал свой кастомный хук связанный с пагинацией (usePagination) т.к. там велись расчёты и возвращались 4 разные значения

[@ГусяНоздреватая]

Учусь в уральском вузе и мечтаю уехать в Лондон, чтобы стать таким же весёлым и жизнерадостным, как Елена)

[@webelart]

Желаю, чтобы всё у вас получилось! ❤

[@webelart]

Главное учитесь, вкладывайтесь, идите к мечте и желанию, и оно точно исполнится!

[@wizardoflightnings6841]

Елена, а Вы просто Software Engineer или Mistress Software Engineer? 🙂 (Senior)

[@magomedaminov4583]

👍👍👍

[@angelicoctahedron3646]

Если не хотите перерендеривать компонент не имеющих пропсов вообще (или же они не меняются по ходу программы) - вместо memo лучше вытащить в константу: function FHome() {} export const FhomeComponent = ; И соответственно везде использовать {FhomeComponent} вместо . useCallback и useMemo можно зачастую тоже избегать, просто вытаскивая объявление функции в родительский компонент. Например, есть Child, который часто перерендеривается: function Child(props) { const time = useInterval(100); //типо кастомный хук, из-за которого этот комопент будет перендериваться каждые 100мс. const heavyResult = useCallback(() => heavyCalc(props.foo), [props.foo]); } Вместо useCallback можно разбить его на два компонента: function Parent(props) { const heavyResult = heavyCalc(props.foo); return }

[@webelart]

Почему вы решили, что такой компонент не будет перерендериваться?

[@angelicoctahedron3646]

@@webelart Это достаточно легко проверить! В вашем примере вы использовали Home = memo(Fhome). Соответственно, если где-то использовать , он перерендериваться не будет, ведь будет возвращена мемоизированная версия. Однако это можно заменить на следующую конструкцию: создать глобальную константу export const HomeComp = ; Если где-то использовать {HomeComp}? то он точно так же не будет перерендериваться. Почему? Потому что конструкция '' была вызвана только один раз, при объявлении глобально переменной.

[@webelart]

@@angelicoctahedron3646 Так вы проверяли? Почему спрашиваю, потому что перерендеринг будет.

[@webelart]

@@angelicoctahedron3646 Все компоненты, которые вы задействуете внутри, если они не мемоизированы, будут перерендерены и не важно как вы их импортируете, вынесете или не вынесете.

[@angelicoctahedron3646]

@@webelart вот простой пример. redraw вызывается только один раз, при маунте компонента. И не вызывается при обновлении родителя. import React from 'react'; function Child() { console.log('redraw'); return Hello } const globalChild = ; export function App(props) { const [count,setCount] = React.useState(0); return ( {count} setCount(count +1)}> {globalChild} ); } Как видите, компонент не пришлось оборачивать его в memo. memo будет полезно когда у компонента меняются пропсы - но для propless компонентов (либо компонентов, чьи пропсы не меняются в ходе программы) его использование не имеет смысла. А магии здесь нет. Конструкция `` транслируется бабелом в createElement(Child). То есть получается, что эта функция будет вызываться каждый раз когда компонент рендерится. Но мы можем этого избежать: если будем передавать компонент через пропы (обычно через children), глобальные переменные, или используя memo.

[@mike-aaa]

А вот если я у родителя обернул onClick в usecallback И передал в дочернюю кнопку (как единсвенный параметр), которая обычная безе memo Она все равно перерендерится? Т.е зачем делать usecallback??? если я не делаю memo??

[@tutnichegonet]

можешь по простому объяснить что такое pure component? а то ты много раз его в видео упоминаешь)

[@webelart]

Да, я под Pure компонентой имела ввиду компоненту обёрнутую в React.memo.

[@Vasilika]

Хороший урок! Очень позитивно и полезно, про злободневные штуки при React разработке.

[@sharkman6434]

Проходил тестовое и была задачка оптимизировать ререндер в 3 компоненте чтоб при вводе в инпут не происходил ререндер, нужно было обернуть ончейнж в 1 компоненте юзколлбеком и 1 компонент обернуть реакт мемо хоком

[@webelart]

Спасибо что поделились! Но вы в будущем пишите нормально называя, раза три пришлось перечитать, чтобы понять ❤️

[@sharkman6434]

@@webelart ок спасибо, Елена снимите пожалуйста видео про стадии рендера компонентов в реакт, почему например юзеффект в чилдрене отработет перед таким же в родителе, на собесах на мидла такое спрашивали. И если в див родителя передать коллбек с рефом и консоль логом почему оно срабатывает до рендера чилдрена. Спасибо и развития вам и вашему каналу !

[@karoche-tv]

Про useReducer, useContext тоже будут?

[@webelart]

Сделаю 👍

[@jamjam3337]

💥💥💥

[@ИгорьАгаларов]

Пришёл посмотреть МЕМЫ, в итоге изучил хуки)

[@karoche-tv]

Здрасте, у меня не работает memo в реактнатив. Короче есть Parent.js внутри есть передающее это состояние в дочерний function SearcResult (){ const typeState= useState (null); const root = useRoute() const {from, destination} = props.params //props.params приходит из useRoute. return ( ) } function UberTypes({typeState, }){ //import types from './assets/types.js const [type,setType]= typeState const onClick = (){ setType(type) } // return ( ) } Ну здесь я обернул React.memo( RuoteMap.js )потому что он неизменяется просто показывает картка и какую то анимацию после загрузки один раз и просп Стейт нечего не меняет. А тот UberTypes меняет тип при нажатии на на каждый UberTypesRow. Что я не правильно делаю? Но

[@volselongames4505]

Привет, а не подскажешь как правильно именовать css модули при импорте их в jsx: import вЭтомМестеКакПравильноИменовать from './КакойТоМодуль.module.css';

[@webelart]

Да, это для nextjs

[@volselongames4505]

@@webelart нет это для react, фронтенд часть

[@Kleo_Wyatt]

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

[@volselongames4505]

@@Kleo_WyattПривет, да уже не актуален, но всё равно спасибо большое за потраченное время на меня, успехов вам

[@АлександрВидин-с6я]

Не думаю, что использовать хуки по ощущения правильно. Но спасибо за объяснения

[@MisaNia25]

Что по RoadMap?

[@webelart]

Ещё не сделала 😔 Поможете сгруппировать видео?

[@MisaNia25]

@@webelart да конечно, помогу

[@olesyapastushenko685]

Как мне не хватало девочек тьюторов! : *****

[@timwin47]

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

[@wellemangrey3645]

Я может глупость спрошу, но почему бы не использовать эти хуки для запросов на сервер (fetch, или axios) ? Для некоторых данных не обязательно каждую секунду отправлять запрос на сервер, узнавать как там дела, не изменилось ли что-нибудь. Я к тому, что отправил запрос в бекэнд, получил данные, записал в стейт, и уже с этим стейтом работаешь, не перевызывая запросы на сервер (не говоря уже о том, что от сервера нужно ещё дождаться этих данных). Чем -не ресурсоёмкое- занимающее время выполнение? Почему для этих нужд не используется _useMemo_ ?

[@webelart]

Отличный вопрос! ❤️ Для этих нужд используется useEffect с пустыми скобками.

[@АртурЦебаев]

memo же можно также, как и хуки имортить и писать без React

[@404russ]

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

[@webelart]

Ахахаха, 😂 Я тут уже писала, не пугайте мою маму. Она меня смотрит. P.S. Мамуль наркотой не страдаю!! ЧЕСТНОЕ СЛОВО!! Люблю тебя ❤

[@webelart]

Максимум, что я пью, курю, дую! Это программирование. 💃 Так что дорогие мои подписчики, давайте вместе под ПРОГРАММИРОВАНИЕ! 😎 ААХАХ или ЗА программирование. 🤭❤‍🔥

[@shanthakobyan3451]

UseDefferedValue and UseTransition hooks please 🙏

[@Koal-e1d]

Спасибо за информацию Но режет слух слово проПСЫ Что ещё за псы) Хотя судя по наличию видео урока про галерею с волками, видимо человек как раз любит псов) А я говорю прОпсы

[@webelart]

Хаха, не я не очень люблю собак. Я кошатница.

[@eleukhin]

А не проще так экспортировать: export default React.memo(SomeComponent); без дополнительных именований

[@webelart]

Не имеет значения. Зависит от того как у вас линтер в команде настроен.

[@hasegawataizou5038]

В начале думал Она бухая.Но поняв что я без работы , и травмы. Понел что я никто

[@webelart]

😂😂 Я вообще не пью! Мой эмоциональный импакт этого не требует вообще...😁 Да и настроение разное. Ещё иногда хочется в видео, чтобы барьеры над сложностью материала снимались. Было интересно, весело и дружелюбно. ❤

[@webelart]

Кстати и да, ещё хотела написать! Вы тут поаккуратнее с такими комментариями, меня мама смотрит! 😎 В прошлый раз мне пришлось убеждать, что я не под наркотой тут в Лондоне, без присмотра😅😅

[@hasegawataizou5038]

@@webelart Незнаю как ответит на этот вопрос Ты ведь взрослая а Мой коммент Жизнейщая жизабенейшая своя логика и своя правда

[@webelart]

​@@hasegawataizou5038 Я просто решила пошутить, всё нормально 😂😂 Пишите разные комменты! Я серьёзно, как чувствуете! Это очень КРУТО! А маме я просто передаю привет. Мамуль, если ты это читаешь, люблю тебя безмерно, со мной всё хорошо ❤🙃

[@hasegawataizou5038]

@@webelart а я уже начел думать что со мной что то не так

[@asaturhakhverdyan5446]

накуренная ?😀😀😀😀 класс видео

[@webelart]

😂 Я не курю...

[@romasbitinas643]

Было бы здорово услышать о том как правильно делать http запросы useffect!

[@dmitry33ful]

Слишком симпотная.

[@webelart]

😍💃Спасибо!! Очень приятно!!!

[@dmitry33ful]

@@webelart Просто правда.

[@alexeyfilippov42]

у сайта loveholidays огромные проблемы с версткой)

[@webelart]

Конкретику дадите?

[@alexeyfilippov42]

@@webelart на мобильном есть небольшой scroll-x

[@webelart]

@@alexeyfilippov42 Скажите какая страница и какое у вас разрешение экрана? Пофиксим!

[@island1345]

Рекурсия - тяжелая функция🤡🤡 завязывай

[@webelart]

Давай ты уж сам себе шнурки как-нить завяжешь 😉

[@miloman1995s]

4:07 - хуки useMemo и useReact..... боже.... я понимаю что все могут оговориться, но это не значит что надо оставлять такой материал... новички посмотрят и реально будут искать хук useReact... ну проверяйте свой контент перед тем как выкладывать, это не дело

[@webelart]

Вы чего так тригеритесь, ну оговорилась, а у вас словно Солнце на Землю упало. Нормально всё. Расслабьтесь и наслаждайтесь контентом. 😘

[@Anonym-li8eb]

Душнила

[@Antonym-b5o]

если честно, проще доку почитать, ничего не понятно

[@webelart]

Прочитайте доку, после возвращайтесь для наглядных примеров❤

[@maximkalenkovich]

так чтобы получить самую достоверную инфу- только доку и нужно читать, а не смотреть видосы от джунов)

[@Niachan666]

Ну слабенько как-то про то, где надо, а где нет. Делать по ощущениям, это не совет. Только ради этого по сути и смотрел, а тут ничего нового.

[@webelart]

Да, ладно вам, не расстраивайтесь! :) Но в тоже время я понимаю вас, мне кажется было бы здорово как-то через профилирование пройти и чтобы конкретные кейсы были и исследование, тогда это было бы огонь. Мне здесь ещё подрасти тоже надо и опыта набраться. Как только нахватаюсь кейсов побольше, уверена сниму ещё видео. ❤

[@webelart]

Кстати если вдруг увидите видео с хорошим объяснением профилирования и сравнения с мемоизацией, тоже кидайте!

[@cybersystem5137]

КомпоненТ. Не ТА, Т! Зачем коверкать?

[@cybersystem5137]

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

[@enjoymtx]

возьми с полочки пирожок, ты умничка. а если будет ещё что-нибудь - обязательно заходи за вторым пирожком

[@cybersystem5137]

@@enjoymtx ты главное побольше запасись ими, я еще за третьим приду и четвертым

[@evgeniy3370]

Привет, когда стрим ?

[@webelart]

Уже был на канале Алгосиков с Виктором kzbin.info/www/bejne/iXvIgpqJmd5pic0. Хотите ещё? :)))

[@evgeniy3370]

@@webelart Ну это вам тогда опрос надо устроить на стёт проведения нового стрима). Я это всенда за) всякий движ)

[@webelart]

@@evgeniy3370 Сделаю!

[@webelart]

В telegram! ❤