ЧТО ТАКОЕ КОЛБЭК РЕФЫ И КАК Я ИХ ИСПОЛЬЗУЮ | CALLBACK REF | REACT HOOKS

В данном видео мы поговорим про колбэк рефы (callback refs). В первую очередь детально разберем, что это такое и как они работают. Затем посмотрим на то, как их можно применять для написания других хуков и решения реальных проблем в коде.
Код из видео:
github.com/Ayub-Begimkulov/yo...
Видео про useEvent:
• САМЫЙ ПОЛЕЗНЫЙ хук для...
Telegram канал:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00-01:39 - Что такое колбек рефы?
01:39-02:56 - Проблема колбек рефами
02:56-06:44 - Понимаем проблему
06:44-08:46 - Смотрим на обычные рефы
08:46-09:45 - Решение
09:45-12:31 - Когда вызываются колбек рефы
12:31-15:34 - Проблемы с обычными рефами
15:34-20:36 - Решаем проблему через callback ref
20:36-25:47 - Объединение рефов
25:47-26:13 - Заключение

[@spoonjeee4785]

Вот подобных видео пожалуйста побольше, очень полезно

[@ayub_begimkulov]

Спасибо за фидбэк! Буду продолжать.

[@sonnytonight414]

Аюб, огромное спасибо тебе за знания, которыми ты делишься!

[@ayub_begimkulov]

Не за что!

[@user-vm2db5cq1g]

Спасибо за подобные видео! очень интересный контент на канале!

[@ayub_begimkulov]

не за что!

[@v.demchenko]

Доступно обьясняешь. Показал проблему детально, дальше решение проблемы.

[@ayub_begimkulov]

Спасибо за фидбэк!

[@kirillpodolinniy309]

Круто, что поставил превью для видео!)

[@ayub_begimkulov]

Раньше вроде тоже превьюшки были)

[@user-dc1pz4ud9c]

Вспомнил про это видео через несколько месяцев как его посмотрел, когда увидел место в uikit где можно смерджить рефы

[@daniilnem9145]

Как всегда очень полезное видео ❤

[@ayub_begimkulov]

Спасибо за фидбэк!

[@vakhr]

Круто, спасибо за ролик, про рефы очень интересно

[@ayub_begimkulov]

Рад, что понравилось!

[@Victor-il9gm]

спасибо за контент! Не до конца понял про combinedRed. в данном кейсе, для человека, который не сталкивался с такой проблемой, тяжело придумать абстракцию проблемы. Так же про forwardRed комментарий типа: 'объяснять не буду, вы уже и так, наверное, знаете.' - не знаю =) а так работа огонь! однозначно в будущем на это видео вернусь. спасибо!

[@ayub_begimkulov]

Проблема обычно заключается в том, что нужно повесить 2 или больше рефов на один элемент, а кейсы реально разные бывают. Про форвард реф - это просто механизм, который позволяет передавать проп `ref` в кастомные компоненты. А так, спасибо за фидбэк! Постараюсь уделять больше внимания деталям в будущем.

[@DmitryKorovin-rr9hl]

Интересное видео, спасибо за контент

[@ayub_begimkulov]

Не за что!

[@beingmyself3706]

Как раз было несколько задач, где необходимо было 2 рефа вешать на дом элемент, и я ломал голову и не знал что делать и пытался переделать логику под один реф) Спасибо большое за решение!

[@user-rm7oz4xu3k]

очень полезно, спасибо!

[@ayub_begimkulov]

не за что!

[@from_brest2631]

Интересный выпуск, лукас

[@ayub_begimkulov]

Спасибо!

[@user-qb7jg4hx5l]

спасибо

[@mercury_2379]

комментарий в поддержку канала

[@ayub_begimkulov]

Спасибо!

[@lord8360]

Норм видос, слушаю фоном и пилю колор пикер для вскода с oklch

[@ayub_begimkulov]

Задача прикольная!

[@user-kj6go4ft4j]

🎉

[@kimanowka]

Сделай обзор на новую доку реакта

[@ayub_begimkulov]

А чего именно там обозревать то? Кажется просто лучше все описали)))

[@fedordostoevskiy4209]

👍👍👍, да без шуток в ролике информации, как в десятках статей, которые ещё найти надо и перевести. 🛰🛸🚀

[@ayub_begimkulov]

Рад, что понравилось!

[@chistyakofff]

По последнему разбору с combinedRef: почему мы не можем взять ref, который приходит в Input и на нем выводить ref.current.getBoundingClientRect() и передавать его же в сам , не создавая при этом ни inputRef, ни combinedInputRef? По реализации так работает, но TS выдает ошибку... Можешь объяснить этот момент пожалуйста Ошибка такая: Свойство "current" не существует в типе "((instance: HTMLInputElement | null) => void) | MutableRefObject". Хотя если вывести сам ref, то можно убедиться, что свойство current там есть.

[@ayub_begimkulov]

Это происходит потому, что ref, который передается в Input - опциональный. Там я использую тип React.ForwardedRef, если посмотреть на него в типизации реакт, то можно увидеть вот такое: type ForwardedRef = ((instance: T | null) => void) | MutableRefObject | null;

[@siparat842]

Хотелось бы узнать, по каким книгам, курсам и т.д. ты изучал реакт (продвинутый). Если бы у тебя были курсы, прикупил бы несколько

[@ayub_begimkulov]

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

[@masserrackheim5358]

@@ayub_begimkulov я никогда курсы не покупал (потому что проще почитать документацию), но твои куплю. Нужны именно рабочие кейсы, как в этом видео

[@pollstetchem]

@@ayub_begimkulov Сам себе придумывал задачки? Хочется применять знания на практике))

[@sharkman6434]

@@ayub_begimkulov Аюб спасибо за твои видео, за канал и за то что бесплатно такой ценной информацией делишься, я всё пересматриваю и всё руками делаю сижу и себе выписываю все в гист чтоб под рукой было. Делай платные курсы так как такой уровень как у тебя пока в рус ютубе нет ни у кого, из реальных практикующих людей из продакшена знаю только тебя и еще 2 человека и это на весь ютуб и рус инфополе

[@TheWorldPeace]

7:45 а что не так? Вроде все работает как планировали? Или я что-то не так понял. Изменяется count изменяется и actualRef.

[@ayub_begimkulov]

Да, все правильно работает. Я хотел показать, что инвалидация старого и инициализация нового рефа происходят даже с обычными рефами. Просто это обычно заметно только с callback рефами из-за отсутствия мемоизации по дефолту.

[@gloshi1337]

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

[@ayub_begimkulov]

Да, конечно.

[@andrTaylor]

То есть получается с помощью cbRef можно запустить действие, которое будет вызвано ещё раньше, чем useLayoutEffect и тогда это будет реализация аналогичная componentWillMount?)

[@ayub_begimkulov]

нет, это будет та же реализация componentDidMount, просто произойдет раньше, чем useLayoutEffect)

[@denmccormik7654]

@@ayub_begimkulov но ведь componentDidMount это первый useEffect, а cbRef вызывается до того как наш компонент отобразится на экране, следовательно до useEffect. Разве нет? Отсюда еще один вопрос: mounting это процесс Layout и так далее и он после mounting происходит Paint в браузере?

[@rustamakhmetyanov4404]

Дружище, спасибо за контент. Да местами еще не понимаю, но уверен со временем буду возвращаться к твоим хукам и "хакам".

[@ayub_begimkulov]

Спасибо за фидбэк! Я думаю тут главное понимать, какие вообще есть возможности, чтобы когда возникла проблема - можно было быстро загуглить.

[@promoabys]

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

[@ayub_begimkulov]

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

[@deantek]

Недавно тоже пришел к этому, была задача сделать сделать автовоспроизведение множества видео, часа 2 потратил по незнанию :D спасибо за видео

[@ayub_begimkulov]

Да, почему-то про колбэк рефы мало где говорят, хотя вещь полезная.

[@spendilpa1559]

"какразтаки" через слово

[@CyberGenius777]

Тебя нужно смотреть на 0.75

[@ayub_begimkulov]

Я знаю есть люди кто и на 1.5 смотрит... но намек я понял)

[@CJIu3eHb]

@@ayub_begimkulov 1.5/1.6 максимум, и то приходится останавливать/перематывать. Потому что темы обычно мудреные поднимаешь. Но подстраиваться ни под кого не надо по скорости, раз ее регулировка есть. Еще Антона Ларичева тоже приходится притормаживать до 1.6/1.8. Остальных где-то до 1.8 иногда. Если англоязычный ресурс - там сложнее, вплоть до 1.0.

[@user-zh5kg2op4h]

Да нормально, я на 2× посмотрел. Когда тараторят или невнятно, приходится на 1,5× снижать (обычно на английском, кино иногда).

[@user-ox4yl6gu3u]

Не комфортная скорость изложения.

[@ayub_begimkulov]

Спасибо за фидбэк! Работаю над этим моментом.

[@user-ox4yl6gu3u]

@@ayub_begimkulov а материал отличный👍

[@batm1x]

Превью супер

[@ayub_begimkulov]

Спасибо!

[@user-uk5tj3qn5q]

[24:29] useComposedRefs

[@ayub_begimkulov]

Кто useForkRef называет)