Тёмный

САМЫЙ ПОЛЕЗНЫЙ хук для ОПТИМИЗАЦИЙ в React | React Hooks 

Подписаться
Просмотров 12 тыс.
% 631

В данном виде мы поговорим про самый полезный хук для оптимизаций в React. Разберемся, что это за хук, как его использовать и чем он может нам помочь оптимизировать наши компоненты.
Ссылка на статью про useRef:
frontarm.com/daishi-kato/use-ref-in-concurrent-mode/
Ссылка на видео про дженерики:
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--AxxfhR95oQ.html
Плейлист по TS:
ru-vid.com/group/PL8fK_R8Bd4mgR7p72qguSqpEwrPwMR4-8
Код из видео:
github.com/Ayub-Begimkulov/youtube-tutorials/tree/master/react-hooks/lessons/use-ref
Таймкоды:
00:00-00:26 - Интро
00:26-01:24 - Что это за хук и как он работает?
01:24-03:15 - Понимаем useRef.
03:15-05:48 - Пример проблемы с рендерами.
05:48-07:52 - Решение через useRef.
07:52-10:35 - Выносим логику в хук useLatest.
10:35-16:16 - useWindowEvent
16:16-20:01 - useEvent
20:01-21:30 - useIsMounted
21:30-26:06 - usePrevious
26:06-29:36 - Кастомная проверка deps у хуков - проблема
29:36-33:02 - Кастомная проверка deps у хуков - решение
33:02-35:02 - useCustomCompare
35:02-35:27 - Заключение

Опубликовано:

 

13 апр 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 125   
@2difficult2do
@2difficult2do Год назад
Очень хорошая подача информации, в темпе и ничего лишнего. Спасибо, было интересно посмотреть.
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@701block
@701block Год назад
Такое ощущение,что подача изменилась,стала такой размеренной и более спокойной.
@ayub_begimkulov
@ayub_begimkulov Год назад
Надеюсь это не только ощущение)
@klubkov
@klubkov Год назад
@@ayub_begimkulov тоже обратил на это внимание. Видео очень полезное, спасибо!
@user-yt6ub5qv9u
@user-yt6ub5qv9u Год назад
В любом случае нужно скорость 0.75 ставить, что бы успевать улавливать мысль)
@kimanowka
@kimanowka Год назад
Очень сложно вообще понимать о чем речь все равно
@narek1771
@narek1771 Год назад
Как всегда видео топчик, нужно писать еще раз вместе с тобой чтобы уж точно понять и помнить, спасибо за интересный и полезный урок
@ayub_begimkulov
@ayub_begimkulov Год назад
Можно просто репу склонить и там поиграться, как вариант.
@fedordostoevskiy4209
@fedordostoevskiy4209 Год назад
👍👍👍, я столько смотрел предыдущий плейлист, что в этот раз всё понял с первого раза😂😂😂
@ayub_begimkulov
@ayub_begimkulov Год назад
поздравляю!
@user-dw8lb8lc7u
@user-dw8lb8lc7u Год назад
очень актуальное видео уверен что многие использовали реф только для доступа к отрендеренным элементам примеры хорошие и реалистичные
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@user-rm7oz4xu3k
@user-rm7oz4xu3k Год назад
Очень полезно. Спасибо) И качество подачи сильно выросло.
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@user-rm7oz4xu3k
@user-rm7oz4xu3k 9 месяцев назад
я уже раз 8 возвращаюсь к этому видео, решил несколько проблемных моментов с оптимизацеий благодаря этой информации, спасибо)
@ayub_begimkulov
@ayub_begimkulov 9 месяцев назад
Это классно, что применяешь информацию на практике. Спасибо за фидбэк!
@alekseyleha9942
@alekseyleha9942 Год назад
Спасибо, Аюб. Буквально в пятницу колхозил свой useWindowEvent, но немного спотыкнулся, а тут твоя неотложная помощь, очень к месту)
@ayub_begimkulov
@ayub_begimkulov Год назад
Круто! Рад, что помог.
@Romka_008
@Romka_008 Год назад
Видео как всегда топ, давай ещё!)
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@alexandrtaushkanov3813
@alexandrtaushkanov3813 Год назад
Очень крутой и полезный контент, не останавливайся, подписота будет расти :)
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@user-mu4my8fq2e
@user-mu4my8fq2e Год назад
Интересный ролик! Моё почтение 🤝
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@user-vm2db5cq1g
@user-vm2db5cq1g Год назад
Очень крутое видео!! Спасибо!
@ayub_begimkulov
@ayub_begimkulov Год назад
не за что!
@STwegas
@STwegas Год назад
Просто огонь🔥
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@Victor-il9gm
@Victor-il9gm Год назад
огонь контент, спасибо!
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк!
@raijinhasarrived
@raijinhasarrived Год назад
Я кайфанул🔥
@ayub_begimkulov
@ayub_begimkulov Год назад
Это хорошо!
@artyomtaranenko2267
@artyomtaranenko2267 Год назад
Хороший контент, раз такое дело, мб про Next серию роликом))
@ayub_begimkulov
@ayub_begimkulov Год назад
Можно подумать, добавлю себе в список.
@jamjam3337
@jamjam3337 Год назад
спасибо!👏👍
@ayub_begimkulov
@ayub_begimkulov Год назад
Не за что!
@mercury_2379
@mercury_2379 Год назад
комментарий в поддержку канала
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@raijinhasarrived
@raijinhasarrived Год назад
Сильный Аюб
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@fastandfurious1833
@fastandfurious1833 11 месяцев назад
Недавно наткнулся на проблему с собственноручно написанным дебоунсом. Суть в том, что колбэк в дебаунсе постоянно подхватывал значения стэйта предыдущего рендера. Пришлось лезть в библиотеку use denounce и смотреть как ребята решили эту проблему. Долго не мог и там понять, а оказалось нужно было использовать реф😂😂. Спасибо за глубокий контент!!! ❤
@ayub_begimkulov
@ayub_begimkulov 9 месяцев назад
рад помочь)
@SuccessMoron
@SuccessMoron Год назад
Отлично! Когда-то начну писать на React, пока только VUE)
@ayub_begimkulov
@ayub_begimkulov Год назад
И что тебе больше нравится?
@kolyunchikable
@kolyunchikable Год назад
Материал очень полезный, но ты быстро говоришь, тяжело воспринимать такую насыщенную инфу в таком темпе, по крайне мере мне как начинающему. Хотя раньше еще быстрее говорил и скакал по коду, прогресс с предыдущими виде налицо! Спасибо за труд, продолжай в том же духе, Аюб!
@ayub_begimkulov
@ayub_begimkulov Год назад
Принял, над речью еще работаю, согласен, что не идеал. Спасибо за фидбэк!
@user-pd9du9on6s
@user-pd9du9on6s Год назад
@@ayub_begimkulov мне наоброт кажется так лучше. В старых видосах говорил медленно, тихо и часто запинался. Сейчас все быстро, четко и громко.
@xice111
@xice111 Год назад
ты можешь замедлить видео
@kolyunchikable
@kolyunchikable Год назад
@@xice111 я так и делал иногда)
@v.demchenko
@v.demchenko Год назад
@@xice111 если тебе медленно ты можешь ускорить видео🤡
@paulbond8244
@paulbond8244 Год назад
👍👍👍
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@lord8360
@lord8360 Год назад
Самое простое действие для оптимизации, это вынести логику из компонента 😊
@ayub_begimkulov
@ayub_begimkulov Год назад
Это не всегда возможно, но решение хорошее.
@user-fj9fw7tu3i
@user-fj9fw7tu3i 8 месяцев назад
Спасибо за видео ! ОЧень информативно) Только есть один вопрос, не совсем понял почему на 18 минуте мы возвращаем реф через apply. Есть какие-то кейсы, где колбэк может случайно взять какой-то this ?
@v.demchenko
@v.demchenko Год назад
Раньше не понимал а сейчас как понял
@ayub_begimkulov
@ayub_begimkulov Год назад
круто!
@maratgrigoryan1674
@maratgrigoryan1674 3 месяца назад
Подскажите пожалуйста, почему в массив зависимостей для useLayoutEffect в хуке useLatest не добавить value? Это сделано специально для каких-то кейсов?
@kirillpodolinniy309
@kirillpodolinniy309 Год назад
Аюб, добрый вечер) Спасибо большое за видео) Есть вопрос! В доке реакта такая информация написанна про useRef "Do not write or read ref.current during rendering. React expects that the body of your component behaves like a pure function: If the inputs (props, state, and context) are the same, it should return exactly the same JSX. Calling it in a different order or with different arguments should not affect the results of other calls. Reading or writing a ref during rendering breaks these expectations." А мы в первом примере делаем это во время рендера, где тут правда и как разобраться? Спасибо)
@ayub_begimkulov
@ayub_begimkulov Год назад
Все верно, в рендере не надо обновлять реф. Я просто так сделал в начале для простоты. Если ты посмотришь видео дальше - то я объясняю этот момент, когда мы разбираем хук useLatest. Ну и статья есть о том, почему так не надо делать в описании.
@andreiostapenko288
@andreiostapenko288 Год назад
@@ayub_begimkulov А на сколько в целом актуален этот пример со states для inputs и хранением value из inputs в ref? Почему в таких кейсах не использовать useDebounce хук или относительно новый useDefferedValue из react
@levsonc
@levsonc 10 месяцев назад
Если обновление рефа стабильное - на ререндерах пишется одно и то же, то ничего страшного. Если нет, то в дев-режиме в strict mode полезут баги. Там рендер-функции, эффекты, стейты и редюсеры исполняются дважды, чтобы как раз отловить сайд-эффекты.
@user-wt8sq9om6c
@user-wt8sq9om6c Год назад
Очень хочется чтобы Айюб, говорил с паузами между предложениями. Потому что в процессе хочется подумать, о сказанном, а иногда просто не успеваешь 🥺🥺🥺
@sharkman6434
@sharkman6434 Год назад
На паузу ставьте и вдумывайтесь что он сказал , этот контент не для новичков, новичкам нужно постоянно вспоминать что такое пропс хук стейт и тп и тд ) и это мозг сильно грузит и из за этого сложно слушать и понимать, со временем и с опытом скорость восприятия поднимется. Он оч классно рассказывает я смотрю на скорости 1,5и это говорит о том что у него дикция хороша. Он один из немногих кто глубокие вещи показывает, не мешайте мастеру )
@user-wt8sq9om6c
@user-wt8sq9om6c Год назад
​@@sharkman6434 а чего сразу не на скорости 2х 😅 ???
@sharkman6434
@sharkman6434 Год назад
@@user-wt8sq9om6c на скорсти 2х Минина смотрю он медленее говорит, кстати попробуйте с минина начать и через годика два сюда уже заглянете ))
@user-wt8sq9om6c
@user-wt8sq9om6c Год назад
@@sharkman6434 та минина уже смотрел давно, надо что то более интеллектуальное, и вот Айюб хорош, но только подача, как будто за айюбом кто-то гонится, это немного мешает. Если взять в вример uilbi, то он тоже быстро подаёт информацию, но у него нет именно спешки. И поэтом усваивается отлично.
@ayub_begimkulov
@ayub_begimkulov Год назад
Над речью надо поработать - споров нету. Активно работаю над этим, надеюсь исправится в ближайших видео. Спасибо за фидбэк!
@user-uk5tj3qn5q
@user-uk5tj3qn5q Год назад
Большое спасибо за твои видео. У меня возник вопрос по поводу хука useIsMounted. Почему в нем не использовать useLayoutEffect?
@ayub_begimkulov
@ayub_begimkulov Год назад
Можно и useLayoutEffect. Разницы нету. Просто обычно асинхронные экшены в useEffect запускают, поэтому как-то разницы у меня на практике и не было. Спасибо за фидбэк!
@user-uk5tj3qn5q
@user-uk5tj3qn5q Год назад
​@@ayub_begimkulov Спасибо за быстрый ответ. Не понимание что useIsMounted нужен только для асинхронных функций рождает дурацкие вопросы)))
@user-uk5tj3qn5q
@user-uk5tj3qn5q Год назад
Потратил на поиск проблемы пол дня и понял что useEffect это оптимальное решение. 1. Если в хуке использовать useEffect а в компоненте useLayoutEffect то работать не будет потому что очередь вызовов. useLayoutEffect решает всем известную проблему с мерцанием(это когда мы внутри useEffect меняем состояние и отображаем его внутри компонента), но мерцание это про синхронный код а в нашем примере асинхронный код. Придумать кейса где в компоненте нам нужен useIsMounted внутри useLayoutEffect я не смог.(тут победа за useEffect) 2. Это косвенно относится к react. useLayoutEffect не работает в nextjs и выбрасывает исключение для обхода этой проблемы используют useIsomorphicLayoutEffect.(тут тоже победа за useEffect)
@AlexanderOsnovnoi
@AlexanderOsnovnoi Год назад
Есть ощущение, что пример с неконтролируемыми input, немножко "сферический в вакууме". Необходимость в использовании именно неконтролируемых полей возникает достаточно редко, но в целом очень хороший урок
@rustamakhmetyanov4404
@rustamakhmetyanov4404 Год назад
у меня в формах частенько встречается, но это может быть изз того что я сам неправильно пишу формы=)
@AlexanderOsnovnoi
@AlexanderOsnovnoi Год назад
@@rustamakhmetyanov4404 Ну если на формах какая-то сложная логика, требующая работы с нативными DOMNode, то вполне возможно, но я достаточно редко пользуюсь неконтролируемыми состояниями
@ayub_begimkulov
@ayub_begimkulov Год назад
Тут на самом деле все примеры "сферические в вакууме". Так как из реально проекта я один пример буду пол урока объяснять. Скорее нужно понять принцип. Бывают случаи, когда у тебя есть четкий флоу, который задумывался реактом - с новым стейтом обновляются все зависимости. Однако в кейсе с формой, наш колбэк вообще не был завязан на стейт, ему просто нужен был способ получать его актуальное значение, а сам он вешался на ивент пользователя. На самом деле такой флоу зачастую нужен именно с функциями, поэтому и был RFC на useEvent hook. А в целом, спасибо за фидбэк. Постараюсь поработать над примерами!
@ayub_begimkulov
@ayub_begimkulov Год назад
На самом деле многие библиотеки используют подход с uncontrolled формами, так как он более оптимальный для перформанса.
@user-qb7jg4hx5l
@user-qb7jg4hx5l 10 месяцев назад
Спасибо за видео. Объясни пожалуйста, в чём отличие useLatest от usePrevious в видео
@ayub_begimkulov
@ayub_begimkulov 9 месяцев назад
useLatest нужен для того, чтобы ты мог использовать значение из стейта или пропсов внутри useCallback, useEffect и тд. без добавления из в зависимости. usePrevious нужен для того, чтобы получить предыдущее значение стейта или пропсов в рендере, чтобы на основе этого уже можно было выполнять какую-то логику. На самом деле бывает нужен только в специфичных кейсах.
@user-qb7jg4hx5l
@user-qb7jg4hx5l 9 месяцев назад
Понял, спасибо@@ayub_begimkulov
@lying6624
@lying6624 Год назад
Не знаю почему мой комментарий удалился, напишу снова. 1. Используй Profiler для наглядности, там лучше всё видно по целому дереву. 2. Прикладывай Git, чтобы потыкать можно было Прекрасное видео
@ayub_begimkulov
@ayub_begimkulov Год назад
Git приложил в описание, почему то в это раз забыл. Вот ссылка: github.com/Ayub-Begimkulov/youtube-tutorials/tree/master/react-hooks/lessons/use-ref Касательно профайлера - даже не подумал. Спасибо за идею и за комментарий!
@sergeysychev6581
@sergeysychev6581 Год назад
Подскажите, пожалуйста, зачем в hook useEvent используется apply, а не просто вызов функции?
@ayub_begimkulov
@ayub_begimkulov Год назад
Можно и вызов функции. Разница нету. Это больше для того, чтобы spread лишнего избежать.
@opexu
@opexu 9 месяцев назад
Тупой вопрос, как человека незнакомого с реактом. А если без useRef колбэк обернуть в объект и передавать объект, то ссылка на объект ведь тоже не поменяется. Можно же без useRef обойтись?
@user-oj4pt3fj2m
@user-oj4pt3fj2m Год назад
Интересно подойдет ли useEvent для первого примера с handleSubmit и почему useIsMounted использует useEffect, а не useLayoutEffect...
@ayub_begimkulov
@ayub_begimkulov Год назад
useEvent подойдет конечно же, для useIsMoutned можно и useLayoutEffect использовать. Просто асинхронные действия ты делаешь обычно в useEffect, поэтому обычно он там только нужен будет.
@michaelkorolev1413
@michaelkorolev1413 5 месяцев назад
@@ayub_begimkulov тоже когда смотрел подумал про useLayoutEffect, чтобы флаг точно поменялся до начала выполнения всех useEffect
@user-pt6dk3yl2v
@user-pt6dk3yl2v Год назад
Подскажи пожалуйста какой у тебя шрифт, который на скринах?
@ayub_begimkulov
@ayub_begimkulov Год назад
На скринах - это те, что с кодом? Если ты про них, то я не знаю названия, дефолтные из VSCode на маке. А если про презу - то это Arial)
@user-pt6dk3yl2v
@user-pt6dk3yl2v Год назад
@@ayub_begimkulov спасибо
@YuryGoltsman
@YuryGoltsman Год назад
Так и не понял зачем в useEvent еще оборачивать в коллбек. Не проще ли в том же рефе держать входную и стабильную выходную функции?
@ayub_begimkulov
@ayub_begimkulov Год назад
Это нужно для того, чтобы постоянно не писать cb.current() при вызове. А так можно использовать хук useLatest и все. Разница нету, просто для удобства сделано)
@user-qn3gm2we5f
@user-qn3gm2we5f Год назад
Метишь на конкуренцию с ульби по быстроте подачи)) Материал однозначно не для новичков, а для опытных кодеров, хотя примеры и разбираются на инпутах.
@ayub_begimkulov
@ayub_begimkulov Год назад
По тому, что мне советуют подавать информацию спокойно "как улби", я могу сделать вывод, что по скорости подачи я абсолютный чемпион!
@ayub_begimkulov
@ayub_begimkulov Год назад
А если серьезно, то в новых видео вроде этот момент должен по лучше стать. Спасибо за фидбэк!
@opexu
@opexu 9 месяцев назад
Уже говорили, что ты знаешь реакт лучше, чем его разрабы?
@opexu
@opexu 9 месяцев назад
*Когда включил god mode для js
@jaloliddinhaqnazarov
@jaloliddinhaqnazarov Год назад
Ayub hozir Yandexda ishlayapsizmi
@ayub_begimkulov
@ayub_begimkulov Год назад
Нет, я уже не работаю в Яндексе.
@8lop966
@8lop966 Год назад
@@ayub_begimkulov кстати , интересно было б услышать твою историю как ты попал в яндекс, там вроде тяжело пробиться
@just__did__it
@just__did__it Год назад
16:45 В жизни не поверю, что идею Дениса Абрамовича отвергнули😮
@ayub_begimkulov
@ayub_begimkulov Год назад
Да там у всех контрибьюторов много идей разных, которые отвергают. Никто тут не исключение.
@user-uk5tj3qn5q
@user-uk5tj3qn5q Год назад
Просто ты плохо понимаешь суть слова use. Например useТутИдетНазваниеКостыля. Уловил суть?
@just__did__it
@just__did__it Год назад
@@user-uk5tj3qn5q Дэн легенда
@user-uk5tj3qn5q
@user-uk5tj3qn5q Год назад
@@just__did__it Проблема не в дэне а в количестве костылей для реакта.
@user-uk5tj3qn5q
@user-uk5tj3qn5q Год назад
​@@just__did__it Хотел промолчать но немогу эта фраза дэн легенда меня все таки сильно зацепила. Слушай корпорация зла тратит миллионы долларов чтобы дэн рекламировал реакт и при этом реакт можно скачать в открытом доступе(звучит как благотворительность), думаешь эти парни хорошие и думают о нас? Ответ нет. Корпорация всегда заинтересована в прибыли или уменьшении убытков. Дэн рекламируя реакт дает компании дешевых программистов то есть они не думают о нас они просто хотят получить более дешевую раб силу на галеру))).
@v.demchenko
@v.demchenko Год назад
Прям очнь быстро говоришь. Я думаю было бы лучше сделать несколько видео где ты пишешь сам код и обьясняешь.
@AlexeyProgramming
@AlexeyProgramming Год назад
Писали бы дальше на классовых компонентах, бед бы не знали. Нет надо было ввести функциональные чтобы потом бороться с их проблемами, погружаться в вечный рефакторинг и оптимизации, писать подобные вермишели из хуков для простейших вещей)))) Ну ререндерится он чаще, ну евенты добавляются-удаляются каждый ререндер, если нет импакта на перфоманс вы просто тратите деньги заказчика на premature meaningless optimization и боритесь с квирками библиотеки каждый раз изобретая велосипед, который кстати давно уже должен был быть внутри реакта 🤭
@kimanowka
@kimanowka Год назад
можно еще быстрее говорить?)
@ayub_begimkulov
@ayub_begimkulov Год назад
Я слышал, что в ютубе 2х можно поставить) А если серьезно, то работаю над речью - постараюсь улучшить этот момент. Спасибо за фидбэк!
@mistrebrown7642
@mistrebrown7642 Год назад
Инфа полезная, но плохо структурировано, из-за чего воспринимать ну оооочень тяжело
@YuryGoltsman
@YuryGoltsman Год назад
export const useStableCallback = ( callback: T|undefined ): T => { const ref = useRef({ callback }) useLayoutEffect(()=>{ ref.current.callback = callback }) if (!ref.current.stable) { ref.current.stable = ((...p: any[]) => ref.current.callback?.(...p)) as any } return ref.current.stable! }
@ayub_begimkulov
@ayub_begimkulov Год назад
Да, так тоже можно)