Зачем на самом деле нужен хук useCallback 

Михаил, спасибо вам за разъяснение useCallback, его лепят везде где нужно и не нужно и никто не понимает особо, зачем он нужен)) Теперь за 8 минут вашего видео все стало на свои места!! От вас контент просто бесценный!!))☺👍 Лайк однозначно!))

Михаил, спасибо за видео. Как всегда на высоте. Сложные вещи простым языком. Было очень полезно послушать про правильное использование useCallback

Как всегда отлично! Спасибо! А еще я прям офигел насколько хороша новая дока React 😯

Спасибо Михаил! Полезное видео 👍

Михаил, это огонь! У меня коллеги тоже любят обернуть банальное сравнение 2х переменных в мемоизацию, не парясь, что мемоизация сильно дороже элементарного сравнения 2х примитивов) нужен баланс между «я вообще ничего не знаю про мемоизацию» и «я мемоизирую каждый чих»

Очень полезный материал получился, спасибо!

Михаил как всегда отличное видео и понятное! Спасибо

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

Просто супер доступно объяснил. Спасибо большое!!!

Отличное объяснение, спасибо!

спасибо за сложные темы простым языком)

Михаил, это были очень познавательные 8 минут)) Спасибо, наконец-то всё по полочкам с useCallback. На проектах все, в том числе я, его использовали неправильно.

Михаил, спасибо за информацию!!!

Михаил, спасибо большое! Просто, понятно, интересно.

Определенно отличное видео, спасибо!!

Спасибо большое за видео, очень качественно всё поясняется

До этого видео я не мог понять для чего useCallback и как ей воообще пользоваться. Видео супер полезное. Частно тут нахожу что-то для себя, спасибо! (Самоучка)

на 8:00 чуть оговорился "два кейса, когда нужен useEffect"

Михаил, спасибо. Всё просто и понятно !!!

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

Круто, можно про useMemo так же по полочкам разложить?)

Михаил, спасибо большое! Смотрел твой бытрый курс по React Router, и тут после третьего видео RU-vid "подсунул" мне это видео. Думал не смотреть, ведь "-да что я ещё могу узнать про useCallback?", оказалось, что ключевую вещь😅. Спасибо! Теперь буду тщательно думать перед решением мемоизации сущностей🤝

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

Спасибо за объяснение!

Спасибо, все отлично объяснил

Кайф🎉 можно еще видео подробное по хукам?

спасибо за видео!

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

Спасибо за видео

Супер, спасибо!

спасибо, очень понятно.

Спасибо за ролик. Очень наглядное объяснение, ибо тема действительно непонятная. Полагаю, аналогичный подход актуален и для useMemo?

Спасибо за пример про связку memo + useCallback. Такого даже чат GPT не подсказал)

Михаил, вы создаете очень полезный контент)

Спасибо огромное, это лучшее объяснение useCallback во всех интернетах! Но я только одного не понял - зачем линтер требует добавить logUpdate в массив зависимостей во втором примере? Какая тут логика?

Михаил, спасибо Вам за ваши труды! С удовольствием смотрю Ваши курсы на Udemy. Планируете ли Вы какой-нибудь новый курс? Очень хотелось бы, раскрыть тему CI/CD Jenkins.

Thanks Mihail!

Ждем про useMemo)

Есть еще коллбэк-рефы, когда функция принимает как аргумент node (dom-узел) и присваивается атрибуту ref в JSX. Используется это обычно для передачи dom-узла кастомному хуку. useRef не всегда тут может помочь, ибо useEffect на него не реагирует, а вот коллбэк-реф он увидит.

Михаил, можешь сделать похожий обзор про useMemo? Понимаю, что там похожая ситуация, но всё же, возможно есть свои нюансы

Очень годно))

отличный урок! Сам никогда не понимал толком, знал в теории, но на практике - профан, давай еще про useMemo, в чем разница с useCallback?

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

У нас в конторе принято всегда оборачивать. Я уже устал спорить, поэтому просто делаю че просят )) А в целом да, знаю давно, что это шляпа каждый раз мемоизировать. Еще есть другой фетишь: юзмемо. Каждую букву заворачивают 😅

Очень крутой 😎👍

Спасибо, но я ничего не понял. Можно ещё какой нибудь пример

Спасибо!

господа, сколько не смотрел не могу понять разницу между useMemo, useEffect, useCallback. Даже после просмотра этого видео не до конца понял всю ситуацию с useCallback. Если не сложно, можете подробно разъяснить или скинуть ссылку на какой-то источник с подробным объяснением.

Забыли сказать про ментальную нагрузку) Минимальный оверхед который дает useCallback не стоит возможных проблем с производительностью в местах где забудешь обернуть в useCallback. Так что с практической точки зрения всё лепить в useCallback имеет смысл

Спасибо

4:17 говорится, что обновился родитель, но чей это родитель? этот момент не понятен, может кто объяснить?

Вопрос , а если мы данные вырисовываем с RTK query , то нужно ли использовать useCallback?

Сделай такой де пример, и предавай колбэк в таблицу и посмотри как будет рендерится или нет

Grand merci à vous, но обращаю внимание уважаемого автора на потенциальную оговорку 8:03: по всей видимости, вместо фразы "два кейса когда нам нужен useEffect()" имелось в виду "два кейса, когда нам нужен useCallback()"? Поправьте, если не так

видел как некоторые люди добавляют useCallback для callback отправленных в addEventListener, я так понимаю это излишне?

Два кейса когда нужен useEffect (8:03) или всё же useCallback?

1е нормальное объяснеие🙏😀

Михаил, вы волшебник. Я только учусь и вчера убил весь день на решение проблемы лишнего рендеринга. А тут ваш видосик подоспел как раз вовремя. Осталось придумать как это все состыковать с useForm :)) Спасибо вам большое за контент.

fantastic !

useCallback и memo - это не бесплатно, не факт, что в попытках оптимизации, всё не стало гораздо медленнее, чем без них. Нужны пруфы, пока же видно лишь то, что нет смысла использовать на столь легковесных компонентах лишнюю оптимизацию.

В первом случае хватило бы только React.memo, повторных ререндеров компоненты не происходило бы

Стоило сказать про преждевременную оптимизацию всё же. А то пойдут ведь добавлять useCallback+memo куда не попадя, считая, что так надо 😅

В доке еще пишут можно все кастомные хуки в useCallback оборачивать

тупо лучший

пять лет уже постоянно что-то делаю на реакт но до этого материала до сих пор не дорос..

а если в Hook вынести?

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

Спасибо, Михаил, у Вас наконец-то появились нормальные коллеги. Судя по объяснению данного хука в рамках курса по Реакт, достойных и мотивирующих коллег у Вас на тот момент не было!))

👏👍

spasibo

8:02 useCallback*

База))

а как же removeEventListener, там необходимо передавать функцию с изначальной ссылкой, и соответственно для этого мы можем callback функцию, передаваемую в addEventListener обернуть в useCallback - чтобы не потерять ссылку на нашу изначальную callback функцию)

Можно забить на useCallback, если ты передаешь свой колбек в какой-то самый простой компонент. Или когда данные, от которых он зависит, постоянно обновляются, и ты точно знаешь как он устроен внутри. А вот взаимодействие с DOM, это уже дорогая операция, это дороже чем инициализировать функцию, и чем 10 функций. А еще очень часто есть много готовых компонентов и компонентов из сторонних модулей, и как на это повлияет использование useCallback, заранее не известно. А выстрелить это может в самый неподходящий момент, заблокировать юзеру страницу, сожрать всю память или вылететь с переполнением стека вызовов. По этому, из соображений безопасности и здравого смысла, использовать useCallback надо для каждой объявленной внутри компонента функции, которая зависит от данных в этом компоненте. В противном случае ей там делать нечего, и она должна быть объявлена вне компонента.

Ну вот эти слова про "дорогую операцию" ничем не подкрепленные, вообще не айс. Сам то проверял или так просто, услышал от кого-то, кто сам услышал от кого-то и т.д., и так вы просто повторяете бездумно друг за другом? Что там с holy js кстати, едешь/не едешь?

Преждевременная оптимизация хуже чем никакая оптимизация вовсе.

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

спасибо очень полезная инфа что он юзается в тандеме с мемо

Почему во Vue все так просто и лаконично. Нужно действие - кидай в экшен, нужно вычисление + кэш - используй компьютед. В React такие сложности из колбека, мемо и рефов ... 🥲