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

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

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

Если не хотите перерендеривать компонент не имеющих пропсов вообще (или же они не меняются по ходу программы) - вместо memo лучше вытащить в константу:
function FHome() {}
export const FhomeComponent = <Fhome/>;
И соответственно везде использовать {FhomeComponent} вместо <Fhome/>.
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 <Child heavyResult={heavyResult} {...props}>
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React Forget - будет настолько крут, что получит возможности, которые есть во Vue2 :)

Документация Vue2

Усилия для оптимизации
В React когда состояние компонента изменяется, оно запускает повторную отрисовку всего поддерева компонента, начиная с себя. Чтобы избежать ненужной повторной отрисовки дочерних компонентов, вам нужно либо использовать PureComponent, либо реализовывать shouldComponentUpdate везде где это возможно. Вам также может потребоваться использовать неизменяемые (immutable) структуры данных, чтобы сделать изменения вашего состояния более удобными к оптимизации. Однако, в некоторых случаях вы не можете рассчитывать на такую оптимизацию, потому что PureComponent/shouldComponentUpdate предполагают, что отображение всего поддерева определяется данными текущего компонента. Если это не так, то такая оптимизация может привести к несогласованному состоянию DOM.

Во Vue зависимости компонента автоматически отслеживаются во время отрисовки, поэтому система точно знает, какие компоненты действительно необходимо повторно отрисовывать при изменении состояния. Каждый компонент можно рассматривать как имеющий shouldComponentUpdate, автоматически реализованный для вас, без ограничений для вложенных компонентов.

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

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

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

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

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

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

💥💥💥

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

Здрасте, у меня не работает memo в реактнатив. Короче есть Parent.js
внутри есть передающее это состояние в дочерний
function SearcResult (){
const typeState= useState (null);
const root = useRoute()

const {from, destination} = props.params

//props.params приходит из useRoute.

return (
<RoutMap from={from} destination={destination}/>
<UberTypes typeState={typeState}>
)
}

function UberTypes({typeState, }){
//import types from './assets/types.js

const [type,setType]= typeState
const onClick = (){
setType(type)
}
//
return (
<UberTypesRow type={type} onPress={onClick}/>
)
}
Ну здесь я обернул React.memo( RuoteMap.js )потому что он неизменяется просто показывает картка и какую то анимацию после загрузки один раз и просп Стейт нечего не меняет. А тот UberTypes меняет тип при нажатии на на каждый UberTypesRow. Что я не правильно делаю? Но

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

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

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

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

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

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

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

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

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

Что по RoadMap?

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