Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React
Vložit
- čas přidán 25. 07. 2024
- В уроке пройдёмся по хукам мемоизации в Реакт, посмотрим как их правильно использовать, в каких случаях лучше использовать.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский CZcams: @webelart_en
💁🏼♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
Ссылки используемые в уроке:
😌 Проект на Github github.com/liveldi/youtube_re...
😌 Рекурсия и стек в JavaScript на примерах: factorial, fibonacci, flatten: • Рекурсия и стек в Java...
Статьи используемые для подготовки:
❤️🔥 Understanding useMemo and useCallback - www.joshwcomeau.com/react/use...
❤️🔥 Why React Re-Renders - www.joshwcomeau.com/react/why...
❤️🔥 Before you Memo - overreacted.io/before-you-memo/
❤️🔥 React without memo - • React without memo
❤️🔥 When to use React.useCallback() - aheadcreative.co.uk/articles/...
❤️🔥 Understanding when to use useMemo - maxrozen.com/understanding-wh...
Коллеги, которые помогли ссылками:
😎 / ivanslo
😎 / artemtsviliy
00:00 Введение.
02:20 Вступление в проект на next.js
03:25 Теория useMemo, useCallback, React.memo
11:30 MyHeavyComponent
14:10 useMemo для тяжёлых вычислений
17:45 Оптимизация без мемоизации
21:40 React.memo - pure component
24:19 Передача объекта в props.
28:50 Передача функций в props.
31:10 Где лучше использовать мемоизацию + примеры из жизни.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Крутая тема, крутое видео!
Хуки и реакт вообще больная тема для меня, слишком много ошибок в них делают разработчики, причем любого уровня.
Есть еще проблема про меморизацию компонента с children, про это многие забывают. Если передать обычный jsx в children компонента обернутого в memo, то на каждый рендер будет вызываться createElement для этого children, а createElement каждый раз создает новый объект, из-за чего меморизация ломается и добавляет лишний вред для производительности вычислениями меморизации. Еще в контекст многие любят передавать объект, ломая перф всего приложения одной строчкой.
Очень круто, что вы поднимаете такие темы.
Спасибо за комментарий и за дополнение про children. Закрепляю!
Так объект можно в useMemo завернуть) не ломая перф никакой
@@sergeys4732 ага, так и надо. Просто для контекстов про это часто забывают, хотя там эта ошибка будет дорогой
@@user-qc8ic8tb3x ога, ну или вынести объект за пределы компоненты и угомониться. Потому что тут он константный.
Как у вас лампово и на лайте, никакой душноты, успехов вам)
😘 Спасибо!
да, и разбор деталей и погружение в технические моменты, нравится мне изучать React вместе с Еленой и ее эмоциями))) Уникальность и оригинальность чувствуется!
Спасибо за такое видео, я сколько видео посмотрел по useMemo и по useCallback не понял, а тут прям все понятно, и весь ролик я так кайфовал, как будто АСМР смотрю)))
Спасибо! Очень доходчиво и понятно все объяснено. Приятно смотреть.
Я очень рада! 😍☺
Елена, спасибо огромное! Лучшие видео-лекции про веб ❤
❤❤❤ Я рада, что материал полезен!
Супер классное понятное объяснение!! Елена спасибо огромное, крутая подача, продолжайте в том же духе 🔥
Спасибо Елена, заслуженный лайк и подписка)) просмотрел кучу видео на эту тему, но так доходчиво еще никто не объснял
Очень доходчиво объяснила 🔥
Елена, огромная тебе благодарность 🤟🏻
Это было исчерпывающее видео, очень круто что разжевали все подробно и все подводные камни изучили. Прям основательный подход
Посреди видео поставил лайк и подписался. Зачет
Спасибо большое за видео, очень нравится ваша подача и позитивное настроение
Желаю побольше просмотров и развития каналу, вы классная :)
Просто огонь! Просто топ! Как все легко и структурно. Задолбался выковыривать инфу про эти хуки. Везде вроде и по делу и в то же время непонятно, что, когда и где пользовать. Спасибо!
Спасибо за видео! Первое видео, в котором наглядно и понятно объяснили в чём разница между useMemo, useCallback и React.memo. Особенно между useMemo, useCallback.
Подача, как всегда - волшебно! :)))
Клёво, что умеешь эмоции включать, так милее уроки получаются) буду изучать хуки, а то пока что знаю о таких как UseEffect и UseState, этого явно маловато ;) благодарю милая)
☺️ круто! Спасибо!
Большое спасибо за качественный контент, как раз подхожу к хукам, в изучении реакта, видео пришлось как нельзя кстати :)
Оооооооо, тема с useMemo и React.memo это топ. А то в инэте в основном инфа по useState и useEffect) Спасибо большое, жду видос про tsconfig.json😄😄
Будет следующим видео! ❤
Спасибо Елена, все круто и понятно, мне понравилось, подписка! Успехов и удачи!!)
Обалденный контент. Спасибо! Жаль раньше вас не нашел
Лена, спасибо за разбор работы мемоизации! Я благодаря ему смог разобрался в реальном проекте с проблемой переключения двух компонентов в табах. У тебя такой ситуации не показано и поэтому я долго исследовал исходник либы Antd и код кастомных табов, у нас на проекте, и не мог понять, почему useMemo не работало. Я и пропсы в компоненты отключил и в useMemo обернул, но они перерисовываются при каждом переключении табов и все тут. Но они же, и спропсами, в ANT'e прекрасно мемоизировались. Т.е. отрабатывали по первому разу, а потом брались из кэша. А проблема была в том, что эти компоненты заменяли друг друга в ДОМ при каждом переключении кастомных табов, т.к. брались из пропса (но это не важно в целом). И решение здесь только одно - монтировать в ДОМ сразу оба компонента (при этом они инициализируются тоже оба), а потом переключать их табами через смену стилей: display: none/block. И тогда они рендерятся заново только при реальной смене их собственных пропсов. Твой же компонент FactorialCalculation один раз монтируется в шаблоне и по нажатию на кнопку не удаляется, и поэтому useMemo для него работает. Но результат для меня очень радостный по итогу :))
Умничка! Спасибо за видео❤
Круто, смотрю третье видео перед подготовкой к собесам.
Спасибо )
Спасибо, очень доступно для понимания !
Огромное спасибо! Я сидел с этими темами 4 часа.
Спасибо за объяснение нюансов, ни у кого такого не слышал. Сам не сильно люблю использовать useMemo, так как сложно понять где он нужен а где нет. Но после видео теперь понял, где его можно юзать и как.
Спасибо за разъяснение, помогло!
Спасибо рекомендациям за ваш канал)
Интересно было послушать, благодарчик
спасибо за урок и хорошее настроение)
Пожалуйста! 🥰❤ Рада, что урок понравился!
Спасибо большое!!! Супер!
Спасибо большое, наконец то я понял эти два хука
Учу реакт, но ещё не дошёл до этих хуков, изучаю useState, useEffect, use Context. Не смотря на это Лена рассказала очень понятно про useMemo, useCallback и reactMemo. Спасибо за ценную информацию)
Какая же ты крутая, Лена!
☺❤
Спасибо большое Елена, вчера из-за этой оптимизации провалил свой первый собес, а нужно было всего лишь раньше посмотреть ваш ролик и ответить правильно на собеседовании :(
да. недавно как раз именно эта инфа появилась на канале в тг React, буквально несколько дней)
после слов будем использовать хуки useMemo, useCallback и REACT.MEMO...... REACT.MEMO Карл, реакт мемо - это хук , Карл... захотелось выключить) надеюсь оговорка, щас посмотрим дальше
лайк, репост, комментарий для продвижения в топ!
❤❤❤
Феминизация слова "компонент" прошла успешно
КомпонентА ❤
Классно развиваетесь
👍👍👍
0:00 Я тоже в свое время плакал когда все это изучал и наконец разобрался... Какими же дегенератами надо быть чтобы все так запутать. Нам рассказывают какой реакт классный и быстрый... Но когда ты сталкиваешься с реальностью на боевых проектах. Когда у тебя нет выхода кроме как поддерживать распиаренные плагины типа formik, в котором на серьезных формах с валидацией начинает тормозить обычный ввод текста в инпут, и ты понимаешь, что ничего сделать не можешь, потому что изначально архитектура этих решений такая...
Спасибо за видео, как всегда все очень ясно и доступно, но есть один очень большой минус - это очень редкий выход видосов, уж оооочень хотелось бы видеть разные уроки почаще)
Спасибо за комментарий! Я стараюсь, стараюсь ребята! 😘❤️
А ещё очень бы хотелось увидеть именно в твоей подаче видео по настройке вебпака или tsconfigа. Если будет возможность, сделай пожалуйста, буду ну очень тебе благодарен, та и люди, которые тебя смотрят, наверняка тоже обрадовались бы такому материалу
Елена все краше и краше с каждым видео😊
😍 Спасибо!
💥💥💥
Спасибо за видео, все круто и информативно! Единственное, в некоторых местах советуют не класть компоненты в служебную папку pages в Next.js)
Вроде туда только стили положила. Вообще да, это же папка для роутинга
@@webelart пойдешь к нам в яндекс работать?
@@ReAgent003Эх, пока в Лондоне. Но Яндексу сердечки! ❤
useMemo - я использовал когда создавал свой кастомный хук связанный с пагинацией (usePagination) т.к. там велись расчёты и возвращались 4 разные значения
Хороший урок! Очень позитивно и полезно, про злободневные штуки при React разработке.
function sleep(ms) {
const timeNow = Date.now();
while (timeNow + ms >= Date.now());
}
Такая штука позволяет более наглядно имитировать тяжелые вычисления.
Крутой пример!
thanks
Елена, а Вы просто Software Engineer или Mistress Software Engineer? 🙂 (Senior)
А вот если я у родителя обернул onClick в usecallback
И передал в дочернюю кнопку (как единсвенный параметр), которая обычная безе memo
Она все равно перерендерится? Т.е зачем делать usecallback??? если я не делаю memo??
Здрасте, у меня не работает 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. Что я не правильно делаю? Но
можешь по простому объяснить что такое pure component? а то ты много раз его в видео упоминаешь)
Да, я под Pure компонентой имела ввиду компоненту обёрнутую в React.memo.
Про useReducer, useContext тоже будут?
Сделаю 👍
Жалко, что нельзя поставить млн лайков ❤
Спасибо большое!!! ❤❤❤ Рада, что контент нравится! 🥰
Привет, а не подскажешь как правильно именовать css модули при импорте их в jsx:
import вЭтомМестеКакПравильноИменовать from './КакойТоМодуль.module.css';
Да, это для nextjs
@@webelart нет это для react, фронтенд часть
Наверное мой ответ уже будет не актуален, но если я правильно поняла, то можешь называть как тебе удобно или как на проекте надо, но часто вижу, что называют просто styles.
@@Kleo_WyattПривет, да уже не актуален, но всё равно спасибо большое за потраченное время на меня, успехов вам
Что может быть лучше, когда красивая женщина учит тебя как пользоваться своим инструментом)
Что может быть лучше? Ну вот миллион долларов, например, лучше.
UseDefferedValue and UseTransition hooks please 🙏
Проходил тестовое и была задачка оптимизировать ререндер в 3 компоненте чтоб при вводе в инпут не происходил ререндер, нужно было обернуть ончейнж в 1 компоненте юзколлбеком и 1 компонент обернуть реакт мемо хоком
Спасибо что поделились! Но вы в будущем пишите нормально называя, раза три пришлось перечитать, чтобы понять ❤️
@@webelart ок спасибо, Елена снимите пожалуйста видео про стадии рендера компонентов в реакт, почему например юзеффект в чилдрене отработет перед таким же в родителе, на собесах на мидла такое спрашивали. И если в див родителя передать коллбек с рефом и консоль логом почему оно срабатывает до рендера чилдрена. Спасибо и развития вам и вашему каналу !
Что по RoadMap?
Ещё не сделала 😔 Поможете сгруппировать видео?
@@webelart да конечно, помогу
Учусь в уральском вузе и мечтаю уехать в Лондон, чтобы стать таким же весёлым и жизнерадостным, как Елена)
Желаю, чтобы всё у вас получилось! ❤
Главное учитесь, вкладывайтесь, идите к мечте и желанию, и оно точно исполнится!
Если не хотите перерендеривать компонент не имеющих пропсов вообще (или же они не меняются по ходу программы) - вместо 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
Это достаточно легко проверить! В вашем примере вы использовали Home = memo(Fhome). Соответственно, если где-то использовать , он перерендериваться не будет, ведь будет возвращена мемоизированная версия.
Однако это можно заменить на следующую конструкцию: создать глобальную константу
export const HomeComp = ;
Если где-то использовать {HomeComp}? то он точно так же не будет перерендериваться.
Почему? Потому что конструкция '' была вызвана только один раз, при объявлении глобально переменной.
@@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.
memo же можно также, как и хуки имортить и писать без React
Я может глупость спрошу, но почему бы не использовать эти хуки для запросов на сервер (fetch, или axios) ? Для некоторых данных не обязательно каждую секунду отправлять запрос на сервер, узнавать как там дела, не изменилось ли что-нибудь. Я к тому, что отправил запрос в бекэнд, получил данные, записал в стейт, и уже с этим стейтом работаешь, не перевызывая запросы на сервер (не говоря уже о том, что от сервера нужно ещё дождаться этих данных). Чем -не ресурсоёмкое- занимающее время выполнение? Почему для этих нужд не используется _useMemo_ ?
Отличный вопрос! ❤️ Для этих нужд используется useEffect с пустыми скобками.
Пришёл посмотреть МЕМЫ, в итоге изучил хуки)
Как мне не хватало девочек тьюторов! : *****
сверх оптимизация...точней что memo требует тоже ресурса а его ресурс так же является память... используем бывает в местах где нет необходимости запоминать.
Было бы здорово услышать о том как правильно делать http запросы useffect!
ты как будто дунула немного перед записью,без обид) я твой фанат
Ахахаха, 😂 Я тут уже писала, не пугайте мою маму. Она меня смотрит.
P.S. Мамуль наркотой не страдаю!! ЧЕСТНОЕ СЛОВО!! Люблю тебя ❤
Максимум, что я пью, курю, дую! Это программирование. 💃 Так что дорогие мои подписчики, давайте вместе под ПРОГРАММИРОВАНИЕ! 😎 ААХАХ или ЗА программирование. 🤭❤🔥
А не проще так экспортировать: export default React.memo(SomeComponent); без дополнительных именований
Не имеет значения. Зависит от того как у вас линтер в команде настроен.
Спасибо за информацию
Но режет слух слово проПСЫ
Что ещё за псы)
Хотя судя по наличию видео урока про галерею с волками, видимо человек как раз любит псов)
А я говорю прОпсы
Хаха, не я не очень люблю собак. Я кошатница.
накуренная ?😀😀😀😀 класс видео
😂 Я не курю...
Понятно, что это пример, но если объект константный - его вообще выносят за пределы компонента и все. Никаких мем не нужно - это жирно сильно.
Слишком симпотная.
😍💃Спасибо!! Очень приятно!!!
@@webelart Просто правда.
В начале думал Она бухая.Но поняв что я без работы , и травмы. Понел что я никто
😂😂 Я вообще не пью! Мой эмоциональный импакт этого не требует вообще...😁 Да и настроение разное. Ещё иногда хочется в видео, чтобы барьеры над сложностью материала снимались. Было интересно, весело и дружелюбно. ❤
Кстати и да, ещё хотела написать! Вы тут поаккуратнее с такими комментариями, меня мама смотрит! 😎 В прошлый раз мне пришлось убеждать, что я не под наркотой тут в Лондоне, без присмотра😅😅
@@webelart Незнаю как ответит на этот вопрос Ты ведь взрослая а Мой коммент Жизнейщая жизабенейшая своя логика и своя правда
@@hasegawataizou5038 Я просто решила пошутить, всё нормально 😂😂 Пишите разные комменты! Я серьёзно, как чувствуете! Это очень КРУТО!
А маме я просто передаю привет. Мамуль, если ты это читаешь, люблю тебя безмерно, со мной всё хорошо ❤🙃
@@webelart а я уже начел думать что со мной что то не так
у сайта loveholidays огромные проблемы с версткой)
Конкретику дадите?
@@webelart на мобильном есть небольшой scroll-x
@@alexeyfilippov42 Скажите какая страница и какое у вас разрешение экрана? Пофиксим!
4:07 - хуки useMemo и useReact..... боже.... я понимаю что все могут оговориться, но это не значит что надо оставлять такой материал... новички посмотрят и реально будут искать хук useReact... ну проверяйте свой контент перед тем как выкладывать, это не дело
Вы чего так тригеритесь, ну оговорилась, а у вас словно Солнце на Землю упало. Нормально всё. Расслабьтесь и наслаждайтесь контентом. 😘
Душнила
Ну слабенько как-то про то, где надо, а где нет. Делать по ощущениям, это не совет. Только ради этого по сути и смотрел, а тут ничего нового.
Да, ладно вам, не расстраивайтесь! :) Но в тоже время я понимаю вас, мне кажется было бы здорово как-то через профилирование пройти и чтобы конкретные кейсы были и исследование, тогда это было бы огонь. Мне здесь ещё подрасти тоже надо и опыта набраться. Как только нахватаюсь кейсов побольше, уверена сниму ещё видео. ❤
Кстати если вдруг увидите видео с хорошим объяснением профилирования и сравнения с мемоизацией, тоже кидайте!
КомпоненТ. Не ТА, Т! Зачем коверкать?
если честно, проще доку почитать, ничего не понятно
Прочитайте доку, после возвращайтесь для наглядных примеров❤
так чтобы получить самую достоверную инфу- только доку и нужно читать, а не смотреть видосы от джунов)
Рекурсия - тяжелая функция🤡🤡 завязывай
Давай ты уж сам себе шнурки как-нить завяжешь 😉
Привет, когда стрим ?
Уже был на канале Алгосиков с Виктором czcams.com/video/SJeQgSdy6Sk/video.html. Хотите ещё? :)))
@@webelart Ну это вам тогда опрос надо устроить на стёт проведения нового стрима). Я это всенда за) всякий движ)
@@evgeniy3370 Сделаю!
В telegram! ❤