Что вы знаете о useCallback? 

Аминь :D

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

Спасибо!) это действительно не легкий труд) будем рады если поделитесь видео с коллегами)

это гигантский труд. Я как то создавал себе анимацию через adobe after effects. Это ад. Там еще нужно иметь супер мега железо, чтобы не зависло.. А процесс создания инфографики очень долгий. Я думаю на анимацию уходит несколько раз больше времени чем на контент

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

@Jerome Lochlan instablaster :)

@@GagikHarutyunyan_dev Привет рендерам по 8 часов, тут вам не реакт с мемойзами

Спасибо!) следующие 2 видео которые выйдут на канале, будут еще круче) **по секрету**

С этим комментарием цель данного видео считаю достигнутой))

Добро пожаловать!) ну уже как минимум на канале разобраные: useRef, useMemo, коснулись useEffect + useLayoutEffect и новый выпуск во вторник еще раскроет, что-то новое)

Да, про useRef, там есть интересные трюки, однозначно про них будет выпуск

Было бы очень не плохо)))

спасибо за комментарий! Я в данный момент намеренно не касался этих примеров, т.к. в следующих выпусках планирую про это поговорить более углубленно :)

@@it-sin9k Супер. Рад что покрывашь эти темы :) Кстати сколько времени уходит что бы смонтировать видео? Картинка получается супер, просто интересно почему в итоге допустим не выбрал обычный вариант например как делает Kent C. Dodds, который как мне кажется занимал бы меньше времени.

нас двое, я придумываю контент, записываю аудио и делаю текстовый драфт по визуализации и есть еще товарищ, который делает всю работу по видео ряду, рисует персонажей, делает разные визуальные эффекты и прочее. Поэтому сумарно это занимает очень много времени, посчитать особо не могу. Лишь один контент осознать и продумать подачу у меня занимает пару дней, по факту это как статью придумать и написать. Синяк - это единственный формат контента, который я бы сам стал смотреть. 5 - 10 минут, осознанного текста, с минимизированным количеством лишней информации (скрыт лишний код, лишние контролы в браузере и многое другое), с крупными шрифтами, чтобы смотреть на телефоне было удобно + фокус кода, чтобы понимать о чем речь идет, да и визуализация идеи какого либо патерна сильно упрощает его понимание, это то что смотрел бы я сам. В подаче Kent C. Dodds такого нет, тогда уж лучше по мне прочесть статьи какие-нибудь, чем смотреть длинные ролики с говорящей головй и перегруженным экраном. А я люблю все таки видео формат, поэтому и решил сделать, то что сам бы смотрел.

Респект за коммент, ради таких всегда их читаю.

Спасибо!)

Мы рады быть полезными :) Рекомендую еще в твитер подписаться, пользы там не много, но иногда провожу опросы, какие темы хотели бы послушать

@@it-sin9k Обязательно! 👌

Абсолютно верно, необходимо использовать React.memo, я как то опустил в визуализации этот момент. Вероятно стоило добавить

@@it-sin9k Спасибо за ответ, очень полезное видео

Да, круто объяснил насчёт создания функции, но как по мне useCallback надо использовать только в связке с React.memo

В большинстве случаев да, но есть и другие более редкие кейсы, когда тебе нужна одна и та же ссылка на функцию. Например если у тебя есть window.addEventListener и window.removeEventListener, в таком случае нужно так же передать одну и туже функцию, иначе ты не сможешь отписаться от события.

@@it-sin9k ну ты конечно высаживаешь.... Найдешь редкий кейс, круто. Спасибо.

Интересный подход к неймингу. Подниму этот вопрос в команде, интересно, кто как отреагирует :)

На этом канале много видео с разбором исходников :)

Сам немного был шокирован, когда осознал))

Завтра утром планируется публикация следующего видео :)

Для этого React-у надо хотя бы 1млрд скачек в неделю)

Спасибо!) делать дальше это без проблем) а вот с чаще немного сложно. Сам контент, каждый выпуск это как статью на хабре написать (по некоторым выпускам мы и публикуем статьи), выматываем достаточно, а еще и видео ряд нужно придумать и смонтировать) Поэтому текущая наша скорость 1 видео раз в 2 недели

@@it-sin9k Успехов желаю) буду ждать каждый выпуск 💪

Спасибо за фидбек! а можете уточнить что вы подразумеваете под "скип, когда пишется функция useCallback?" что именно хотелось бы добавить?

@@it-sin9k когда показывалась реализация функции вместе с ее условиями, то например, мне хотелось самому же прочитать эти условия, так сказать зафиксировать их у себя в голове, а не просто пробежаться по ним. Как бы там не было ничего сложного, но хочется большой остановки на этом. Смотрю сейчас доклад, как же бодро ты рассказываешь, хочу с тобой работать)

Я просмотрел заново видос) понял о чем ты говоришь, я специально не останавливался особо на реализации useCallback, потому что через пару видео планирую эксперементальное видео, рассмотреть исходники реакта. Т.е. все смогут подробно увидеть, что примерно происходит под капотом. Конечно всю кодовую базу не получится раскрыть, но что-то получится

привет передавай брату!)

Спасибо! Трудов действительно много) а алгоритмы ютуба не исповедимы))

сам страдал, что не хватает контента для себя. Вот решил его сам создать)

Ради таких бесценных комментариев мы и стараемся)

@@it-sin9k планируются ли какие-то курсы по реакту?

@@user-bt9hx3ik6e что то подобное планируется, но будет думаю еще не скоро, платформу решили свою запилить для этого. Там много идей, что на ней можно запилить

@@it-sin9k думаю такой курс был бы один из лучших в ру-регионе.ждем запуска платформы тогда)

@@user-bt9hx3ik6e очень на это надеюсь) но надо набраться терпения)

да, я так не добавил обертку в memo(). Пропустил этот моментик)

Спасибо) Новое видео уже залито на канал) завтра утром запланирована публикация) так что пока все успеваем в дедлайны))

Спасибо!

Идея в том чтобы оборачивать в useCallback метод onCarClick, который находится в компоненте Cars. Это нужно для того чтобы компонент Car получал одну и туже ссылку на функцию, тогда компонент Car можно обернуть в memo и благодаря тому что ссылка на функцию будет одна и таже, компонент Car не будет заново рендериться, на каждый чих родителя. С другой стороны внутри компонента Car нет смысла оборачивать onClick. useCallback(() => onCarClick(car), [onCarClick, car]). Потому что нам нет нужды в одной и той же ссылке, пусть на каждый render функция новая передается в

@@it-sin9k да, я про это и спрашивал - какая функция имеется в виду в этом моменте (ппросто там явно не озвучено), в таком варианте - да, все ясно

@@it-sin9k > компонент Car не будет заново рендериться, на каждый чих родителя. На сколько я знаю компонент рендериться при новых пропсах или стейте и получается при новых пропсах ({cars}) компонент будет рендериться и за счет этого его потомки тоже Т е useCallback в тоже не имеет смысла?

Если компонент Car не обернут в memo, тогда Car будет рендериться абсолютно при любом рендере родителя. В данном примере я подразумевал, что компонент Car обернут в memo. Это значит, что компонент Car будет рендериться, только в случае, если хотя бы один из props изменится. Одним из таких props может быть функция onCarClick. Если мы не обернем ее в Cars в useCallback, тогда мы будет передавать новую ссылку на функцию, при каждом рендере Cars, а это значит что абсолютно все компоненты Car будут рендериться. Поэтому и оборачивается в useCallback, для того чтобы мемоизировать функцию, и каждый раз в props передавать одну и ту же ссылку на функцию onCarsClick

Тут 2 проблемки :) - Не хочу трафик с ютуба на хабр отправлять, идея была скорее наоборот) - ну и статьи давно перестал выпускать новые, что то комменты на хабре иногда меня очень расстраивали. Комменты на ютубе куда более приятно читать и отвечать людям Есть мысли сделать свой ресурс, куда расшифровки публиковать, тогда точно буду постить)

@@it-sin9k логично, я и не подумал об этом)

спасибо!) мы работаем над ее улучшением)

ахах) возможно по видео и составляли тестовое)

1. Дело в том что компонент Car обернут в memo(). Соответственно чтобы избежать лишних рендеров, нужно передавать ссылку на одну и ту же функцию, а если создавать функцию снаружи, то вы каждый раз передаете новую ссылку на функцию. Да и саму функцию создаете, на каждый рендер листа, а если он в компоненте, то функция создавалась бы только при перерендоре 2. Так и сделано же 3. Для функции есть useCallback, а не useMemo. Да при работе с листами, чтобы передавать одну и ту же ссылку на функцию лучше обернуть ее в useCallback

​@@it-sin9k, спасибо большое за ответ, но все же, либо я туплю, либо вы не совсем поняли вопрос 1. У меня ситуация идентичная как у вас в примере, за исключением того, что функция onCarClick принимает кроме car, ещё и event. Так вот. 1. В обернул объявление функции в useCallback, чтобы ссылка оставалась прежней. 2. Обернул компоненту в memo-HOC. 3. Но в я НЕ создаю по новой "const onClick = () => onCarClick(car, event)", по тому что, в return нужно ивент "поймать". Тоесть получается "return ( onCarClick(car, event)} />)" - каждый раз анонимная функция передается. Если бы я объявил ранее, то как бы переданая ссылка ивент поймала? Либо я просто не знаю как правильно сделать :( Как тогда оптимизировать?

​@@_ivanoleksiukНе вижу в этом никакой сложности, вы вполне можете написать следующий код: const onClick = (event) => onCarClick(event, car) return click me

@@it-sin9k спасибо большое! Не знал что так работать будет. У меня два аргумента в функции, один из них ивент. Я думал будет работать если только два передавать. Думал всегда нужно анонимную с указанием двух. Не понимаю откуда берет второй (указываю "const onClick = (event) => onCarClick(event);" и работает). Но ничего - разберемся!

Похожая дискуссия происходила на хабре, если интересна выжимка (я придерживаюсь того же мнения), то склонялись к тому что onClick пере присвоить (addEventLister / removeEventListener) дешевле чем прогонять данные через useCallback. И читабельность ухудшается. Вот ссылка на тред, более подробно почитать можно мысли разных людей habr.com/en/post/529950/#comment_22379830

спасибо! Мы рады что ты нас нашел))

За "Поделился с коллегами ссылкой" огромное спасибо!)

Спасибо! Надеюсь найдете себе еще что-то полезное на канале)

Спасибо :) мы очень старались)

да, все верно. Я не показал явно, что компонент обернут в React.memo. Без этого не будет работать

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

@@MrKu39 Если функция в `useMemo` и обработчик в `useCallback`, то функция не будут срабатывать без изменения пропсов сверху или стейтов внутри

@@user-nd5zd5kc5k Да , все верно. Но только компонент в React.memo. Не совсем понял про removeEventListener и addEventListener. Почему они не будут срабатывать? Да и операция простейшая , имхо она легче чем useCallback

@@MrKu39 если добавить useCallback, но не добавлять React.memo, как в примере из видео, то оптимизация сведется к тому, что компонент (функция) все равно будет полностью срабатывать, будет видеть, что обработчик функции не изменился и не будет лишнего removeEventListenet и addEventListenet, которые были бы без useCallback

Спасибо!) Добро пожаловать!)

Спасибо!)

Абсолютно верно :)

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

Очень рад!)

Продвигаем канал!))

спасиииииибо!

набросайте лучше код) так будет понятнее)

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

чтобы сделать замыкание на конкретную машину в onClick

@@it-sin9k спасибо! Очень круто!

Спасибо!) Мы очень стараемся!

спасибо!)

то что делается на 8:45 работает вместе с useCallback. А как еще передать параметры?

​@@it-sin9k А если заглянуть внутрь компонента Car. там мы создадим еще одну функцию, которая свяжет onCarClick и объект car. В этом случае нет никакой пользы оборачивать метод в useCallback, т.к. нам не важно, ссылка это на функцию с прошлого рендера или с текущего рендера... тут наверно про использование нового useCallback уже для Car? Наверно я не так понял, думал что продолжаете говорить про родительский useCallback, что в нем теперь нет необходимости. Спасибо!)

useCallback у родительского компонента нужен был, чтобы при рендере списка машин, все компоненты Car не обновлялись, чтобы все получали одну и ту же ссылку. А внутри Car там уже не важно, что мы передаем в onClick. На уровне DOM дерева можно и разную ссылку передавать, это дешевая операция

@@it-sin9k благодарю. Я затупил 🤷‍♂️

Спасибо!

Все верно) React.memo забыл в видео добавить))

Привет :) давайте попробуем пойти от обратного, а почему здесь нужен useCallback? После вашего ответа, мне будет проще понять, ход ваших мыслей)

@@it-sin9k ход моих мыслей - полный хаос с этой меморизацией в голове, вроде много лет продакшн опыта, но никто в командах никогда не уделял этому такое внимание и писали почти везде useCallbak на каждый хендлер. Но тут возможно имеет место быть и атомарность данного компонента, так что тут useCallback бессмысленен, button не может обновиться без обновления внешнего Button по идее

@@awakeupcall5336 "тут useCallback бессмысленен, button не может обновиться без обновления внешнего Button по идее" (с) А даже если компонент обновится по другой причине и onClick создастся заново. Какой вред это причин по вашей версии?

Если я правильно понимаю, то есть смысл использовать useCallback только в 2 ситуациях, если у нас мемоизирован компонент, либо если функция в зависимостях у useEffect или типа того

@@user-nd5zd5kc5k Абсолютно верно :)

Да, вы абсолютно правы)

Честно говоря мы еще сами не разобрались, что лучше подписка на патреон или спонсорство на youtube) поэтому где вам удобнее) А по поводу последнего предложения, мы рады любой помощи) Поэтому напишите на почту blue.sin9k@gmail.com, а там обсудим)

все для вас)

Спасибо :) не уловил суть вопроса про функцию высшего порядка

​@@it-sin9k вместо юсКолбэк можно использовать функцию высшего порядка и в первом аргументе получаем результат функции вызванной в мапере на обработчик онКарКлик={функция(car)}. Не могу написать код, потому что ютюб его удаляет (((

@@it-sin9k надеюсь доступно объяснил

@@sergiogusto Так функция высшего порядка вернет всегда новую ссылку в onCarClick. Что ломает memo. А useCallback занимается именно кешированием старой функции

Если вы используете React.memo() то лучше использовать useCallback

Спасибо ❤

ахахах) хороший вопрос)

это лайк из Австралии

Да, все верно. К сожалению не заметили эту проблему перед публикацией видео :(

Пришлось даже пересмотреть все видео, чтобы понять вопрос) На будущее бросайте тайм код, чтобы не искать)) А так ваши рассуждения абсолютно верные. По идее можно было бы просто сравнить на shallowEqual() и все тут. Почему же я поступил иначе. Я не выдумал этот код, я лишь упростил реальные исходники useCallback. Поэтому вышло немного не очевидно. Но как вы понимаете не в этом суть видео :)

@@it-sin9k да, точно, извини, что без таймкода 😄

да, не имеет смысла. Я не указал React.memo по ошибке в примере

В данной реализации не очень эффективно выносить вверх. Так во всем компоненты мы передаем одну и ту же ссылку на функцию. И благодаря этому React.memo, помогает нам предотвращать рендеры. А если вынесем на уровень map создание функции, то всегда будет новая ссылка на функцию и тогда React.memo не будет никогда работать

нет, не будет. функция создается всегда. useCallback лишь может принимать решение. Вернуть вам функцию только что созданную или мемоизированную. А история про Test и useMemo это уже другая тема

@@it-sin9k А, спасибо, да, это я затупил - ф-я будет создаваться на каждый рендер, а вот ссылка на ф-ю будет меняться реже.

Конечно будет! Используйте useCallback и получайте профит!

@@MrCortc почему будет?

@@it-sin9k Хм, я писал подробный комментарий к этому видео, но сейчас его нет. Хочешь сказать youtube удалил? Сохрани в массив все someFunction после объявления и сравни. В обычном случае они всегда разные. В случае использования useCallback только в первый будет отличаться. Видимо реакт создает какую-то заглушку функции.

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

@@it-sin9k спасибо за еще более сложный и неоднозначный ответ. не каждый же раз мы компоненты оборачиваем. а вот юзколлбэки практически везде лепят.

@@romanmed9035 Вбил в поиск у себя в проекте useCallback, у меня их 7 на весь проект)) Почти не используем)

@@it-sin9k спасибо. теперь понятно что это специфический зверь и не надо всегда и везде его использовать не подумав.

Верно) его лучше использовать, когда ты знаешь точно, что без него будет плохо)

Да, все правильно :) либо можно в React.memo вторым параметром передать функцию сравнения props.

@@it-sin9k вы имеете ввиду, что во втором параметре мемо все обрабатывать как обычно, кроме конкретно этой, необернутой функции. Именно ее обработать таким образом, что если меняется ссылка на нее, то все равно не вызывать ререндер?

@@ivanMoldovanu есть такая возможность, если вам нужен рендер, только например когда 1 из 5 props иеняется, мы можем написать проверку в react.memo, чтобы только его сравнивать и в таком случае не важно, новая ссылка на функцию пришла или старая

@@it-sin9k спасибо!!!

Выбора у нас особо нет. Если используешь хуки, значит создаешь функцию на каждый рендер. Вопрос тогда сводится к следующему: классы или функциональные компоненты? Ответ здесь: ru.reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

@@it-sin9k спасибо за оперативный ответ) Уточню, а то я немного запуталась. Под "лучше создавать фун-ию на каждый рендер" подразумевается использование хуков? Или речь о том, чтобы не используя хуки, позволить пересоздавать функцию (которую пытаешься передать в колбэк хука)?

Честно говорю я уже теряю суть вопроса)) В видео я пытался показать, не пишите классовые компоненты, а пишите функциональные компоненты. Но в функциональных компонентах может показаться, излишним создание функции например const onClick = {} на каждый рендер. Так вот это не проблема, просто смириться с этим надо))

@@it-sin9k Поняла, спасибо!

Да, все верно. Я в видео явно не показал, что оборачиваю компонент в React.memo. Но это имелось ввиду, я не помню уже честно говоря, проговаривал ли я словами это

Смотрите дальше) там есть целый ряд видео про исходники этих хуков

верно :)

@@it-sin9k так а почему не сказал об этом в видео?)

@@Inkognit123 хз, пропустил просто)) уже порядка 20 комментов под видео на эту тему) но видео поправить уже не получится)

в функциях, чаще всего используются props, т.е. нужно замыкание делать

@@it-sin9k так и в чем проблема?

если вынести onClick например из самого компонента, то как потом получить доступ к props?

@@it-sin9k передать в качестве аргументов в функцию, которая вернет уже функцию для он клика. Зачем каждый рендер пересоздавать одни и теже функции и окружения, если их можно создать один раз?

А какая разница сколько зависимостей у useCallback? на результат это вроде как не влияет

@@it-sin9k я про те зависимости, которые идут вторым аргументом (deps). И чем реже меняются эти зависимости, тем больше попаданий в кэш. Соответственно выгодней использовать useCallback.