#3: React Hooks - useRef

[@oleksiimishchenko5827]

Мало того, что все доходчиво и в деталях объяснил, так еще и грамотной речью и с четкой дикцией! Я в восторге от автора!

[@kulikboxx]

Гений чистой красоты! Снимаю шляпу и аплодирую стоя! Плейлист по реакт-хукам просто бомба! Спасибо тебе огромное, добрый человек!

[@vadim9634]

это лучшее что я видел о этом хуке ,спасибо

[@ВладОся-з7ь]

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

[@Дмитрий-б5в]

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

[@ВадимХаликов-н2е]

В компании?

[@lovikuanyshev]

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

[@sviatbondar1721]

Просто без лишнего, и такие мелочи не везде узнаешь. Спасибо!!

[@AmirLT-x6y]

Thaks. All iš very clear. No questions. It is the best video about useEffect🎉🎉🎉🎉🎉🎉🎉🎉

[@Virisound]

Коммент в поддержку видео: "Даaa..., отличная работа".

[@unknown.6914]

Прекрасный урок, спасибо

[@11wingsofdeath]

Благодарю ❤ очень круто объясняешь механику

[@Poziratelb]

Как раз вожусь с ними. Дают много возможностей

[@blackwood8816]

Как же все подробно и доходчиво объяснил, благодарю 🙏

[@MAKSIMTSA]

Круто! НАконец-то все понял. По полочкам разложил!)

[@ValentinTayursky]

Спасибо за объяснения. Весьма полезное видео!

[@volodya_kod6]

Спасибо мужик, все стало понятно!

[@alexandrzhuykov7355]

Самое крутое объяснение этого хука!!! СПАСИБО!!

[@DzhavidR]

круту, круто! Спасибо. Давно ждал по хукам видео именно от тебя, именно потому что хорошо объясняешь. Надеюсь и по остальным хукам будет видео, в частности useReducer вообще туго дается

[@ВладиславМаслов-л7ж]

Супер полезное видео, спасибо за труд!

[@bur5153]

1)Нужно для того что бы достучаться правильно до дом элемента, и повесить на него обработчик событий или достучаться до какой либо функции этого элемента(audio,video(play,pause и т д.) 2)Нужен для того что бы хранить актуальные данные из переменной(на которой есть useRef), так как при рендере компоненты ссылка на актуальную переменную теряется

[@drewnaumenko2469]

" повесить на него обработчик событий " ну вот немного непонятно именно в каких случаях делать так как в видео а в каких console.log('scroll')}>

[@kava648]

@@drewnaumenko2469 в теории, если тебе не нужно будет, скажем, в дальнейшем удалять обработчик, то можно и просто добавить onScroll

[@drewnaumenko2469]

@@kava648 кстати хорошая тема поднялась Когда мы через атрибуты обработчики навешиваем мы и никогда их не удаляли. например onClick или любой другой евент. Click и всё; мы же не удаляем обработчик мы вот так на кнопку обработчик навесили и всё почему со скоролом мы должны удалять?

[@AndreyEricksonGame]

@@drewnaumenko2469 Как я думаю, мы должны удалять обработчик события - 'скролл', как ни странно, чтобы отменить это событие скролла. Потому что пока мы не удалим прослушку события, то логично, что событие скролл никуда не денется и callback внутри addEventList будет вызываться при каждом скролле. Надеюсь ответил на ваш вопрос

[@drewnaumenko2469]

@@AndreyEricksonGame ну это если мы его навешиваем через addEventListener , а если через атрибуты? точно не знаю но через атрибуты React под капотам сам чистит всё, видимо так.

[@МасияГусейнов-ъ5е]

Будь здоров ! Спасибо !

[@СеитханРискельдиев]

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

[@daryaemelyanova1785]

Очень наглядно и пример хороший 👍

[@БауржанКадискалиев]

Спасибо большое за подробный материал

[@alexrybalov8917]

Это видео меня спасло. Благодарю.

[@AleksandrKovalchuk-z8m]

Привет. Спасибо за отличный материал!

[@alexsandr9444]

Круто объясняешь, давай про остальные хуки

[@ВладимирГугин-ш7щ]

На 6:10 уже сам реакт намекает нам Assignments to the 'ultElem' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps

[@ВладиславКильчевский-к5ц]

Переписывал следом за тобой до таймеров, и не понимал, почему у меня нет в логах сообщения о скролле, спустя минут 30 допер что без css стилей таких же, он не фиксируется ) Видосы крутые!

[@cradleofkaschenko2057]

Про сам хук начинается с 12:00. Революционный подход!

[@nikitakurochka2752]

Очень крутое видео. Долгое время мучали вопросы по этой теме) А тперь все пушка !!

[@strel9]

лукос не глядя, какраз хотел с useRef разобраться

[@bubinbei]

ul { height: 150px; overflow: auto; } необходимо добавить это css свойство, иначе скрол не будет отрабатывать

[@СвириденкоВолодимир-х1с]

Ценю тебя мужик!

[@bohdanshyrii2380]

спасибо мужик! очень помог!

[@br_ann]

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

[@romankhudovekov5145]

Благодарю за полезное видео!

[@dimags500]

Очень хороши ваши уроки , спасибо

[@Witcher-simple-YouTube]

Очень хочется в твоей подаче послушать про mobx

[@crypto4elik]

очень ясно! спасиб!

[@wither-it-channel]

лайк не глядя

[@strel9]

сделай видос собеса на Джуна на Реакт, может одного или нескольких подписчиков (или как вариант вакансию на HH разместить), думаю будет популярный видос

[@-web2378]

Думаю нет

[@ultraduck100]

@@-web2378 ну да, все же сразу на мидла или сеньера идут

[@-web2378]

Ruslan Nagiev тут не в этом дело. Либо ты идёшь и проходишь собеседование на джуна, либо ты сидишь и смотришь видос на ютубе. Если человек хочет найти работу, в частности джуна, то он берет и идёт и ползёт на собеседование. А у вас получается другой подход, который называется «Сижу смотрю видос про собеседование джуном, но на джуна не пойду ещё года два» . И чем больше вы ждёте такой ролик, тем больше вероятность того, что вы будете джуном, который так и не пойдёт на собеседование, но будет с удовольствием переносить все тяготы и невзгоды через другого, точнее через того, который видос этот снимет. Вот и вывод, что вам легче посмотреть видос по собеседованию часа на два, чем сходить и самому пройти эти собеседования.

[@strel9]

Нукат - web так то же самое и про мидла сказал можно😂 про любое собеседование😂

[@ultraduck100]

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

[@xmarsianca]

Прекрасное объяснение!! Спасибо!

[@aliaksandrjanuary5305]

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

[@TheMaratnasyrov]

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

[@ArchakovBlog]

Почему уместней юзать там setState? И почему useRef не подходит?

[@olegbukovskiy7484]

Благодарю, было полезно 👍

[@Mark1-f2n]

братан ждем про useCallback от тебя

[@ruslankarimov6490]

спасибо!!!

[@tatyanamaksymenko289]

Благодарочка!)

[@kseniazh1738]

Спасибо за отличные примеры!!! Вопрос: хранение данных в созданном объекте Ref напоминает создание глобальной переменной с хранением в useRef. Можно ли к созданному объекту Ref в одном файле обращаться из другого файла? Типа как брать/менять данные из Redux? Если да, то как это сделать и влияет ли подчиненность/очередность создания документов? Или Ref работает только здесь и сейчас? Т.е. без перезагрузки ушли из формы в другую, объект исчез. Вернулись - счетчик обнулился, создался новый объект, снова нажимай на кнопку?

[@ArchakovBlog]

Можно использовать useContext, если нужно прям глобально с ним работать или прокинуть в пропсы этот реф, чтобы передать его дальше. Реф работает только в конкретном компоненте, как useState, например.

[@serg1221]

великолепно

[@YevhenHromov]

Спасибо огромное за урок! По мере прохождения появился вопрос) Если запустить таймер несколько раз подряд, создадутся разные ссылки (разные айди таймеров), и остановить уже просто по первой ссылке все таймеры не выйдет. Как обойти эту проблему? можно ли иметь доступ к каждой новой созданной ссылке поочерёдно или нужно как-то избегать пересоздания новых ссылок. Пока писал, понял, что ответ где-то в районе меморизации или useCallback'a)

[@dinmukhammedtleuzhanuly1225]

Спасибо, за крутое обьяснение)

[@ggadoctb]

Каждый, кто посмотрел данный плейлист, искал медь, а нашел золото)

[@kenanhaciyev3759]

спасибо

[@challengetolearnenglishfor9823]

Thank you very much

[@ALEKSEY_77737]

отлично!

[@wittyvillain]

Хороший пример! А как сделать чтобы скролл автоматически опускался в конец списка?

[@skeelo3157]

В примере с массивом чисел так же бы сработал useMemo?

[@apa6368]

Салам алейкум, расскажи про useContex, самая запутанная, как по мне, тема

[@DzhavidR]

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

[@DzhavidR]

если кому интересно, то это не тема была, а лигатуры, нашел Fira Code github.com/tonsky/FiraCode

[@privatehost7117]

Изыди, демон, с белой темой

[@ВсеволодЗорин-л6н]

@@privatehost7117 не бурчи,! всё збс! не переживай, скоро ты поймёшь почему именно так ;)

[@Wazelinchik]

Теперь есть чем заняться в 2 часа ночи.

[@ОлегОвчинников-щ9с]

🔥🔥🔥🔥🔥🔥🔥

[@frontman6849]

ну почему? ну почему белая тема?

[@adam-front]

Ночью надо спать!

[@amelianceskymusic]

Согласен, жесть

[@localhost666]

Наоборот отлично, не режет глаза при переходе от IDE в браузер

[@snakevenom8039]

иди наҩӱйӣ😅

[@frontman6849]

@@snakevenom8039 неа

[@akhmedmagomedov324]

Пожалуйста обьясните как в current попала цифра 4, и почему она растет если запускать таймер?

[@BeDb_MeDb]

Привет, прошу прощения. Вы сказали, на 11:50 примерно, что нельзя в глобальную область выносить. Я подключаю модуль с сокетами, подключить его в функции ясно что не могу. Потом я использую этот сокет в функции. Вопрос: что я делаю не так? (сейчас по Вашим видео пытаюсь понять, думаю, что моя ошибка как раз в неправильном понимании того, что эти хуки есть такое) Однако, если я сейчас в правильное место не вынесу подключение сокета и не налажу это все грамотно - задолбаюсь дебажить (по чесноку уже задолбался:-D) Большое спасибо за внимание.

[@MarinYehor]

Денис, подскажи, я не понял последнее с setInterval 1) почему timerRef.current хранил в себе число 4? 2) А так же почему нужно было добавлять в функции addNumber prev state? Разве при вызове addNumber не меняется state и уже при следующем вызове addNumber не должно ли логически браться новый state с добавленным числом? Ведь происходит ререндер и данная функция addNumber уже должна получать актуальное значение state Спасибо за выпуск, целую тебе руки)) Жду useCallback видео с нетерпением

[@dimeliora]

1. useRef создаёт объект с полем current. Далее мы можем его использовать для сохранения любой информации и быть уверенными, что она не потеряется при перерендере. setInterval при вызове возвращает номер запущенного таймера, он нужен для того, чтобы потом этот таймер сбросить (clearInterval принимает номер таймера, который надо сбросить). Если его не сохранить, то сбросить таймер после не получится. В данном случае таймер вернул номер 4, его и сохранили, а потом использовали для сброса. 2. Документация гласит, что если новое состояние зависит от старого (всякие коллекции, счётчики и т.д.), то правильно будет в функцию обновления state отдавать колбек. Этот колбек примет аргументом актуальное значение state, и на его основе мы создаём новое.

[@dychkos]

Большое спасибо за информативное видео!

[@romanpetrashkevich5292]

Нужно немного поправить метод start, для защиты от множественного нажатия на кнопку старт. const start = () => { if (timerRef.current) { clearInterval(timerRef.current); } timerRef.current = setInterval(addNumber, 1000); };

[@westside9145]

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

[@eugenegavrilov2618]

как это поможет с изучением react'a?

[@westside9145]

@@eugenegavrilov2618 брат, мир шире чем "изучение реакта"

[@eugenegavrilov2618]

@@westside9145 согласен, но ты задал вопрос в коменете, под уроком на рекате)

[@alexsedmoy2200]

👍👍👍

[@darkside2436]

Когда 8 часть по клону твиттера?

[@petrmurashko6884]

Где найти шрифт со значком => для VS code?

[@ДанилоНовосад-ь7х]

Спасибо, а как ты сделал плавный курсор в vs code?

[@DzhavidR]

Зайди в настройки vsCode - в поиске набираешь курсор - и выбираешь Editor cursor blinking: expand

[@user-bo7mb9cf4d]

Топ!

[@samolevich]

Так много магии

[@АлександрСосо-щ1б]

Приветствую! Спасибо за урок! только не понятно, может ли быть несколько useRef внутри одной компоненты для выполнения разных задач, или свойство current одно на компоненту?

[@ArchakovBlog]

Если разные задачи, то вполне может

[@michaeldevichenskiy4588]

Где у вас учиться , ну или как ?

[@Mike-hp3fh]

В svelte все, что есть в React сделано в 100 раз проще. Но приходится учить React, т.к. он есть везде, а о svelte еще мало кто знает.

[@miloman1995s]

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

[@kawaikaino5277]

Ахаха)) забавно

[@jorgenUA]

доку читай, она хорошая - быстрее будет

[@alienspro]

Смени работу на реакт, ониперспективнее в разы. А для хорошего дохода только Angular. Очень юольшие корпоротивные приложения только га Angular последнее время делают. Nest.js еще сильнее популяризирует это.

[@miloman1995s]

@@kawaikaino5277 забавно то, что выучил vue , писал на нем с кайфом 8 месяцев, щас опять нужен реакт, снова вспоминаю и переучиваю react) вот это забавно

[@MadBlissOff]

Что за клавиатура? Такой звук клавиш приятный, прям не могу

[@bukanaka]

Может механика с голубыми свичами

[@MadBlissOff]

@@bukanaka у голубых свитчей щелчок есть, а тут его нет

[@abobus_xero]

Почему у меня не выполняется функция handleScroll при прокрутке,но с обычным кликом все работает. Все сделано как на видео?

[@ПродюссерЛетов]

Привет, прошло 8 месяцев, ты решил проблему?

[@abobus_xero]

@@ПродюссерЛетов честно уже не помню, гуглил и понял почему, но на данный момент с этим не было проблем больше

[@ПродюссерЛетов]

@@abobus_xero понял, спасибо за своевременный ответ!

[@АрчибальтГугенов]

очень запутанный пример

[@Mike-hp3fh]

Очевидно, что если в компоненте использовать несколько React.useRef и вызывать их в случайном порядке, или просто не в строго определенном порядке, то все полетит к чертям. Новички конечно об этом и не подозревают.

[@theBarracuda_]

Из-за чего?

[@Mike-hp3fh]

@@theBarracuda_ из-за того что при таком подходе (я имею ввиду возможности JavaScript которые использует React) это единственный способ связать данные с кодом. На каждом вызове useRef увеличивать внутренний счетчик на 1 и брать следующий из объект из внутреннего массива.

[@alexeystaroverov4804]

Scroll всегда неудачный пример там куча нюансов не связных с целевой функцией

[@someguy4973]

"Но это не есть хорошо, мы должны использовать нормальное решение". Далее автор использует "нормальное решение", не объяснив а почему все же "это не есть хорошо", потому что видимо сам не разобрался в этом вопросе.

[@harrisonwinston2850]

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

[@Калабарака]

ничего не понятно вообще

[@Mike-hp3fh]

Госспади какой же ужас этот React

[@Liver_Room]

видео явно для полных нулей ато обясняют так будто мы обезяны безмозглые

[@turalinov]

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