#3: React Hooks - useRef

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

[@oleksiimishchenko5827]

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

[@kulikboxx]

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

[@vadim9634]

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

[@user-rp6er4mp2f]

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

[@user-pk9be7ep9p]

В компании?

[@user-zs7kr6yp2s]

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

[@user-re2hk5ub7m]

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

[@alexrybalov8917]

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

[@user-pw3zu1ed4v]

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

[@ValentinTayursky]

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

[@blackwood8816]

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

[@11wingsofdeath]

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

[@romankhudovekov5145]

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

[@alexandrzhuykov7355]

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

[@xmarsianca]

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

[@user-gp9lt9cc2d]

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

[@sviatbondar1721]

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

[@nikitakurochka2752]

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

[@user-ve9rx1ju6i]

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

[@daryaemelyanova1785]

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

[@unknown.6914]

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

[@lovikuanyshev]

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

[@strel9]

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

[@DzhavidR]

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

[@dimags500]

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

[@br_ann]

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

[@rimavedeckiene2203]

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

[@tatyanamaksymenko289]

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

[@olegbukovskiy7484]

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

[@turalinov]

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

[@volodya_kod6]

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

[@Poziratelb]

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

[@MAKSIMTSA]

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

[@dinmukhammedtleuzhanuly1225]

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

[@bohdanshyrii2380]

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

[@alexsandr9444]

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

[@crypto4elik]

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

[@Virisound]

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

[@ALEKSEY_77737]

отлично!

[@serg1221]

великолепно

[@wither-it-channel]

лайк не глядя

[@ruslankarimov6490]

спасибо!!!

[@challengetolearnenglishfor9823]

Thank you very much

[@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 под капотам сам чистит всё, видимо так.

[@user-se2gf7em6d]

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

[@user-rn3et9eh5x]

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

[@user-ym2iq4wi1i]

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

[@user-bo7mb9cf4d]

Топ!

[@kenanhaciyev3759]

спасибо

[@user-tt3bc7yk8r]

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

[@cradleofkaschenko2057]

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

[@user-rp8oy2kf5d]

На 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

[@Witcher-simple-YouTube]

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

[@strel9]

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

[@-web2378]

Думаю нет

[@ultraduck100]

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

[@-web2378]

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

[@strel9]

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

[@ultraduck100]

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

[@dychkos]

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

[@Wazelinchik]

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

[@user-ri9io9vp3i]

🔥🔥🔥🔥🔥🔥🔥

[@wittyvillain]

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

[@skeelo3157]

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

[@user-fq4pc7fm2z]

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

[@ArchakovBlog]

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

[@YevhenHromov]

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

[@BeDb_MeDb]

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

[@kseniazh1738]

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

[@ArchakovBlog]

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

[@alexsedmoy2200]

👍👍👍

[@akhmedmagomedov324]

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

[@DzhavidR]

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

[@DzhavidR]

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

[@privatehost7117]

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

[@user-pd4gt9zz9c]

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

[@user-mi4qz2ng4y]

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

[@DzhavidR]

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

[@ggadoctb]

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

[@aliaksandrjanuary5305]

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

[@TheMaratnasyrov]

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

[@ArchakovBlog]

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

[@darkside2436]

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

[@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, и на его основе мы создаём новое.

[@frontman6849]

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

[@adam-front]

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

[@amelianceskymusic]

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

[@localhost666]

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

[@snakevenom8039]

иди наҩӱйӣ😅

[@frontman6849]

@@snakevenom8039 неа

[@petrmurashko6884]

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

[@apa6368]

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

[@westside9145]

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

[@eugenegavrilov2618]

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

[@westside9145]

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

[@eugenegavrilov2618]

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

[@michaeldevichenskiy4588]

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

[@romanpetrashkevich5292]

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

[@miloman1995s]

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

[@kawaikaino5277]

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

[@jorgenUA]

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

[@alienspro]

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

[@miloman1995s]

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

[@snobou12]

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

[@user-pi8qz6ni4q]

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

[@snobou12]

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

[@user-pi8qz6ni4q]

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

[@Mike-hp3fh]

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

[@MadBlissOff]

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

[@bukanaka]

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

[@MadBlissOff]

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

[@samolevich]

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

[@Mike-hp3fh]

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

[@theBarracuda_]

Из-за чего?

[@Mike-hp3fh]

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

[@reactnext13]

самое расширенное объяснение useRef

[@alexeystaroverov4804]

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

[@user-cu2ng7gf4k]

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

[@Mike-hp3fh]

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

[@someguy4973]

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

[@harrisonwinston2850]

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

[@user-vj3hk5es7b]

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

[@Front_Hunter]

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