#5: React Hooks - useCallback

📢 Платный курс по ReactJS с наставником: mentor.archakov.im/landing.html
❤️ Поддержка:
- Patreon: / archakovblog
- Донаты: www.donationalerts.com/r/arch...
Советую сначала посмотреть, как работает useEffect, useRef и useMemo, чтобы понять принцип работы хука useCallback.
📢 О чём я буду рассказывать?
Я решил сделать новый курс по React-хукам и рассказать подробно о том, как работает каждый хук. В данном видео, я рассказываю о хуке useCallback.
Видео по остальным хукам:
- useState: • #1: React Hooks - useS...
- useEffect: • #2: React Hooks - useE...
- useRef: • #3: React Hooks - useRef
- useMemo + React.memo: • #4: React Hooks - useM...
❓ Кому подойдёт этот курс?
Для начинающих, которые только начали изучать ReactJS и для тех, кто изучает более 3-х месяцев.
На каждый хук, есть отдельная ветка в репозитории ниже. Просто кликаете по "Branch" и выбираете нужный хук.
Ссылка на GitHub: github.com/Archakov06/react-h...
0:00 - Начало
0:47 - Пример приложения с проблемой
2:45 - Решение проблемы и детальное объяснение потери ссылки на функцию
4:56 - Оборачиваем функцию с помощью useCallback
11:47 - Используем useCallback и useRef для получения актуальных данных
15:26 - Второй пример, в котором мы решим лишний ререндер с помощью React.useCallback + React.memo
22:09 - Почему не надо оборачивать все с помощью useCallback, useMemo и React.memo
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim

[@r1cro]

Мне кажется, что такие видео можно добавить в офф.документацию под каждую статью по хукам. Объяснение, как говорится, «на пальцах».

[@TheLevius]

Пожалуй лучший урок по useCallback в React

[@DANCEDAG]

Видео супер подача бомба ✅👍 Жду видео про хук useReducer, useContext и ещё про кастомнык хуки. Пожалуйста выпусти эти видео. Ты прям инфу в голову как в коробку книги кладёшь))

[@Shadowblade52]

Согласен с вами. Новые видео по хукам не помешают

[@GabrialWeb]

Лучший!!! Очень хорошо разжевываешь информацию!

[@RainbowJet1]

Божественная подача информации! Вот изза чего хочется ставить лайк и подписку

[@turalinov]

Лучшее объяснение useCallback, спасибо за столь доскональное объяснение )

[@gregoryHH]

Автор, спасибо тебе огромное!!! Кучу всего перечитал и пересморел по хукам, но ничего не понял пока не посмотрел твои видосы. Спасибище!!! Ты так доходчиво объясняешь, что все становится понятно сразу!

[@taras7844]

Денис, самые понятнее уроки по хукам, с нетерпения жду следующих видосов.

[@yulia_kotlyar]

Спасибо за видео, ты очень круто объясняешь про хуки!

[@StorySieva]

Очень круто подаешь материал)

[@user-tg1lh9ly5r]

Cупер! Спасибо большое за видео!

[@pavloskuibida6292]

Спасибо тебе, Человечище!

[@user-gp9lt9cc2d]

Сделай побольше видео про хуки. Круто и очень понятно объясняешь. Продолжай

[@viacheslavhinchuk5162]

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

[@nakku_tricks]

Мужик, это лучшее объяснение данного хука на просторах веб-паутины, спасибо!

[@artsiomwithoutme8753]

Зубенко Михаил Петрович - МАФИОЗНИК

[@useit1]

Я просто лайк зашел поставить, видос потом гляну, он точно топ, надо к нг закупиться еще

[@1MrGerman]

Чудово пояснив! Я тепер розумію для чого потрібен цей useCallback

[@zooyotz]

Еееее, какая годнота) Пожалуйста, не записывай видео 3 часа ночи

[@oleksiik4473]

Ух темп :) Спасибо! Можна дальше useContext/useReducer

[@__procherk__]

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

[@kri4evskiy]

А теперь добавь в этот плэй-лист видосик о кастомных хуках. Для полноты картины.

[@user-ic9hf3ps4z]

Благодарю

[@manch-_-]

​ @Archakov Blog Привет! Спасибо больше за контент, очень доходчиво и без лишней воды! Очень жду от тебя, впрочем, наверное, как и многие тут, видео про useContext!) Планируешь ли записать его?

[@michaeldevichenskiy4588]

Всем по привету! Хорошее видео прям Минин второй :) Но один бы пример хоть где это нужно а где нет . Есть конечно догадки но на опыте еще не сталкивался .

[@Maxim9575]

Минин в сравнении с тобой просто нервно курит в сторонке. Классно объясняешь, не прекращай!

[@wqqtm3584]

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

[@omarkertis5294]

Годноту подвезли) Денис, сделай пожалуйста объясняющее видео по своей папке config, которую обычно используешь в проектах. Там много чего накручено, далеко не всё понятно для чего.

[@user-rk7dm1xm3r]

Офигенно качественно и последовательно. Интересно какой у вас опыт ?

[@user-gw4df2de3k]

молодец!

[@user-ri9io9vp3i]

🔥🔥🔥🔥🔥🔥🔥

[@user-vn3if3wt9p]

Я ПОНЯЛ!!!

[@SlimShady-pw1zp]

какая у тебя тема в VSC и спасибо за уроки

[@viap.2845]

👍👍👍👍👍👍👍

[@user-on4lv7lc9k]

видос идет 25 мин с темой useCallback, но при этом посвятили ему тут минут 5 максимум

[@whiteguards43]

А все внутренние функции который пересоздаются и вызываются, к примеру та же функция Stop, раз она перевызвалась, то должна же тоже увидеть ссылку на новый скролл?

[@vladthorenco2675]

Сам React должен делать ренедеры. Это необходимо делать только в крайних случаях, если хотите достичь производительности, а так пускай делает ререндеры. Как говориться в пределах разумного. Спасибо за информацию, было полезно

[@user-iq9ll8lz9m]

Привет. Спасибо за контент. Вопрос, это последнее видео серии про хуки?

[@ArchakovBlog]

Привет! Не-а

[@manch-_-]

​@@ArchakovBlog Привет! Спасибо больше за контент, очень доходчиво и без лишней воды! Очень жду от тебя, впрочем, наверное, как и многие тут, видео про useContext!) Планируешь ли записать его?

[@localhost666]

Разве после ререндера в функции stop содержится предыдущий handleScroll? Она же тоже заново создаётся, соответственно и хэндлскролл в ней новый. А то что после изменения стэйта после вызова stop вызов хэндлскролл не прекращается, то это происходит вызов предыдущей функции, потому что она так и осталась, мы удалили подписку только на текущий хэндлскролл. Это можно проверить, добавив вывод в консоль стэйта

[@lidijajezova2025]

Продублирую вопрос, которые уже задавали, может ответит кто-то. Если все функции пересоздаются заново, то почему в stop не записывает ссылка на только созданную handleScroll?

[@ko22012]

в этом примере нет необходимости использовать useCallback и memo в реальном проекте. это имеет смысла, если в дочерних компонентах большие вычисления. Это просто пример.

[@sergeydostovalov6180]

То, что ререндер - это норм и реакт всё разрулит - миф. Можете сравнить отзывчивость интерфейсов озона и яндекс маркета. В озоне используется вью, в котором по умолчанию всё мемоизировано (новые значения пропсов нужно отслеживать явно), а в яндексе любой неосторожный клик пораждает перерисовку всей страницы.

[@luchick6852]

Коммент просто

[@Gdyvfjttyhhh]

По поводу первого примера, а именно о том что "функция запоминает данные при маунте" стоило бы еще и добавить, что это не магия какая-то, а обычное замыкание. Функция замкнулась на данные из Lexical Environment функции App при первом вызове.

[@astkh4381]

можешь, пожалуйста, объяснить почему когда мы обновляем стейт, а вместе с ним функцию start, то start не обновляет ссылку на handleScroll?

[@wqqtm3584]

@@astkh4381 Арчаков ошибся в этот куске, когда обновляется компонент, все функции создаются заново и обработчик удаления скролла будет ссылаться не на старую ссылку, как он сказал, а на новую, а если мы удаляем новую ссылку на функцию hadleScroll, старая остается, соответсвенно и скролл останется

[@amelianceskymusic]

22:50 - из документации: «Этот метод предназначен только для оптимизации производительности. Не полагайтесь на него, чтобы «предотвратить» рендер, так как это может привести к ошибкам.»

[@abdulloxathamov1358]

сделайте видео об "Axios"

[@rozt107]

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

[@arturam9768]

А почему конда start пересоздается, не начинает работать с тоже пересозданным handleClick-oм, а все равно ссылается на старый?

[@Sl1de13]

Начинает, но стоп уже не ссылается на старый листенер, поэтому стартовать то новый евент линтенер стартует, а вот старый евент не стопится уже

[@ruslankarimov6490]

Спасибо!!!

[@4sARy]

Можно же заместо prev[prev.length - 1] + 1 просто написать prev.length : ?

[@aipronator]

Это частный случай, подойдет для [1,2,3,4,5], но не подойдет например для [2,3,4,5].

[@artem8547]

Зачем хэндлер делать через eventListener если можно через пропсу. Или это как пример?

[@lorandemarcus]

Получается useCallback замыкает в себе старое лексическое окружение?

[@OlegKshlkv]

Спасибо за видео, но у меня есть вопрос: а почему нельзя просто функции onPlus и onMinus вынести за пределы компонента? Нам же нет смысла их каждый раз пересоздавать?

[@user-pd7kh1hw7c]

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

[@StrikerFeed]

@@user-pd7kh1hw7c Но ведь функция "выше" компонента может как аргумент принимать сеттер из useState'а, и внутри вызывать этот сеттер :) Это все костыли и я не поддерживаю автора идеи вынести функции выше, но я сказал, что в принципе - это возможно)

[@ivanMoldovanu]

Хотел бы спросить: Правильно ли я понимаю - если есть дочерний компонент, ререндеры которого очень дорогостоящие, то, в таком случае, мы оборачиваем функцию, которую передаем в него, в useCallback. Вопрос вот в чем - допустим, в этот дочерний компонент мы передаем 5 функций. Если я не оберну хотя бы одну функцию в useCallback, то обернутые остальные 4 функции не имеют смысла(т к при ререндере родительского компонента, из которого мы эти функции передаем в дочерний, ререндерится эта одна единственная необернутая функция, что заставляет ререндерится дочерний компонент)? Заранее спасибо за ответ!

[@artful_alpha]

Button- су , плевать - сохранились у вас ссылки или нет :D

[@kentavr_go]

Не понятно одно, почему применяя useCallback без зависимостей numbers остаётся неизменным, хотя это ссылка, а используя useRef меняется, хотя это тоже ссылка.

[@user-eq2eb5dk3k]

Спасибо за уроки, одни из лучших на ютубе если не лучшие. Можно вопрос? Откуда английский акцент и странные фразочки типа "это есть неправильно"?))))) Мы так не говорим уже лет 100 или 200. Сейчас "это есть неправильно" значит что ты кушаешь то, что не положено))

[@saswwer]

Если все функции пересоздаются заново, то почему в stop не записывает ссылка на только созданную handleScroll

[@lidijajezova2025]

Тоже не понимаю

[@wither-it-channel]

✅ - это какая то библиотека?

[@user-cp7qw6ox6b]

Модель своей клавиатуры не подскажешь? Больно клёва звучит она.

[@ArchakovBlog]

Varmilo VA87MN

[@user-ri9io9vp3i]

А в чем прикол useCallback, если есть useRef, в котором мы можем сохранить функцию?

[@mk3mk3mk]

Ужос! И это только с тремя кнопками! Такой гемор😊 А что будет в случае интернет магазина😮

[@sergeyzhukov1370]

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

[@ArchakovBlog]

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

[@sergeyzhukov1370]

@@ArchakovBlog К сожалению в большинстве проектов я вижу что практически все обернуто в useCallback и useMemo, разрабы делают это даже просто на всякий случай. Вот и я стал постепенно привыкать к плохому) По сути если метод никуда не передается в пропсы и не содержит сайд эфектов мемоизация не нужна. Ну и кстати все зависит от того какими данными оперериует колбек если там например большой массив картинок в base64 формате обрабатывается то думаю браузер в кокой то момент подвиснет или выдаст ошибку интересно даже может эксперемент проведу как нибудь.

[@krolikrodjer8879]

Ничего она не кушает. В случае с этими хуками -- кешируется только одно единственное значение, не считая легковесного массива зависимостей. Без мемоизации каждый рендер создает новую функцию, уничтожая старую, с мемоизацией дела обстоят даже проще -- не происходит лишняя аллокация памяти без необходимости, но размер памяти остается ровно таким же. Единственный случай, когда мемоизация играет плохую роль -- когда компонент уже вне зоны видимости, но на такие кейсы реакт умеет самостоятельно очищать закешированные значения, потому хуки мемоизации не работают на 100% надежно.

[@sergeyzhukov1370]

@@krolikrodjer8879 Ну то что для каждой зависимости это да я ошибся но как минимум в два раза больше памяти будут занимать все эти переменные. И насчет легковесности опять же все зависит от того что в зависимостях, хотя конечно использовать в качестве зависимостей что то кроме скалярных значений не совсем правильно но ничто не запрещает это делать и получается что по факту это не оптимизация а лишь вынужденная мера, чтобы избежать лишних рендеров

[@sergeyzhukov1370]

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

[@gulamovrustam85]

Всё таки не показал примерами, когда не рекомендуется использовать usecallback

[@atlasua2021]

Не React всё таки, конченная вещь.

[@miloman1995s]

Vue рулит

[@atlasua2021]

@@miloman1995s он реактивен.

[@andTutin]

Напиши не конченую вещь, человечество ждёт

[@atlasua2021]

@@andTutin ты не понимаешь шуток? иди учись в свой гигбрейнс дитя.

[@atlasua2021]

откуда столько злости (

[@greatseller9541]

действием очистки консоли ждать отвязки события...