САМЫЙ ПОЛЕЗНЫЙ хук для ОПТИМИЗАЦИЙ в React | React Hooks
Рет қаралды 12,201
Күн бұрынВ данном виде мы поговорим про самый полезный хук для оптимизаций в React. Разберемся, что это за хук, как его использовать и чем он может нам помочь оптимизировать наши компоненты.
Ссылка на статью про useRef:
frontarm.com/daishi-kato/use-...
Ссылка на видео про дженерики:
• Продвинутое использова...
Плейлист по TS:
• Продвинутый TypeScript
Код из видео:
github.com/Ayub-Begimkulov/yo...
Таймкоды:
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 - Заключение
@2difficult2do Жыл бұрын
Очень хорошая подача информации, в темпе и ничего лишнего. Спасибо, было интересно посмотреть.
@ayub_begimkulov Жыл бұрын
Спасибо!
@701block Жыл бұрын
Такое ощущение,что подача изменилась,стала такой размеренной и более спокойной.
@ayub_begimkulov Жыл бұрын
Надеюсь это не только ощущение)
@klubkov Жыл бұрын
@@ayub_begimkulov тоже обратил на это внимание. Видео очень полезное, спасибо!
@user-yt6ub5qv9u Жыл бұрын
В любом случае нужно скорость 0.75 ставить, что бы успевать улавливать мысль)
@kimanowka Жыл бұрын
Очень сложно вообще понимать о чем речь все равно
@fedordostoevskiy4209 Жыл бұрын
👍👍👍, я столько смотрел предыдущий плейлист, что в этот раз всё понял с первого раза😂😂😂
@ayub_begimkulov Жыл бұрын
поздравляю!
@user-dw8lb8lc7u Жыл бұрын
очень актуальное видео уверен что многие использовали реф только для доступа к отрендеренным элементам примеры хорошие и реалистичные
@ayub_begimkulov Жыл бұрын
Спасибо!
@narek1771 Жыл бұрын
Как всегда видео топчик, нужно писать еще раз вместе с тобой чтобы уж точно понять и помнить, спасибо за интересный и полезный урок
@ayub_begimkulov Жыл бұрын
Можно просто репу склонить и там поиграться, как вариант.
@user-rm7oz4xu3k Жыл бұрын
Очень полезно. Спасибо) И качество подачи сильно выросло.
@ayub_begimkulov Жыл бұрын
Спасибо!
@alekseyleha9942 Жыл бұрын
Спасибо, Аюб. Буквально в пятницу колхозил свой useWindowEvent, но немного спотыкнулся, а тут твоя неотложная помощь, очень к месту)
@ayub_begimkulov Жыл бұрын
Круто! Рад, что помог.
@user-rm7oz4xu3k 9 ай бұрын
я уже раз 8 возвращаюсь к этому видео, решил несколько проблемных моментов с оптимизацеий благодаря этой информации, спасибо)
@ayub_begimkulov 9 ай бұрын
Это классно, что применяешь информацию на практике. Спасибо за фидбэк!
@alexandrtaushkanov3813 Жыл бұрын
Очень крутой и полезный контент, не останавливайся, подписота будет расти :)
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-mu4my8fq2e Жыл бұрын
Интересный ролик! Моё почтение 🤝
@ayub_begimkulov Жыл бұрын
Спасибо!
@Romka_008 Жыл бұрын
Видео как всегда топ, давай ещё!)
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-vm2db5cq1g Жыл бұрын
Очень крутое видео!! Спасибо!
@ayub_begimkulov Жыл бұрын
не за что!
@Victor-il9gm Жыл бұрын
огонь контент, спасибо!
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@STwegas Жыл бұрын
Просто огонь🔥
@ayub_begimkulov Жыл бұрын
Спасибо!
@raijinhasarrived Жыл бұрын
Я кайфанул🔥
@ayub_begimkulov Жыл бұрын
Это хорошо!
@lord8360 Жыл бұрын
Самое простое действие для оптимизации, это вынести логику из компонента 😊
@ayub_begimkulov Жыл бұрын
Это не всегда возможно, но решение хорошее.
@jamjam3337 Жыл бұрын
спасибо!👏👍
@ayub_begimkulov Жыл бұрын
Не за что!
@v.demchenko Жыл бұрын
Раньше не понимал а сейчас как понял
@ayub_begimkulov Жыл бұрын
круто!
@artyomtaranenko2267 Жыл бұрын
Хороший контент, раз такое дело, мб про Next серию роликом))
@ayub_begimkulov Жыл бұрын
Можно подумать, добавлю себе в список.
@mercury_2379 Жыл бұрын
комментарий в поддержку канала
@ayub_begimkulov Жыл бұрын
Спасибо!
@fastandfurious1833 11 ай бұрын
Недавно наткнулся на проблему с собственноручно написанным дебоунсом. Суть в том, что колбэк в дебаунсе постоянно подхватывал значения стэйта предыдущего рендера. Пришлось лезть в библиотеку use denounce и смотреть как ребята решили эту проблему. Долго не мог и там понять, а оказалось нужно было использовать реф😂😂. Спасибо за глубокий контент!!! ❤
@ayub_begimkulov 9 ай бұрын
рад помочь)
@raijinhasarrived Жыл бұрын
Сильный Аюб
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-fj9fw7tu3i 8 ай бұрын
Спасибо за видео ! ОЧень информативно) Только есть один вопрос, не совсем понял почему на 18 минуте мы возвращаем реф через apply. Есть какие-то кейсы, где колбэк может случайно взять какой-то this ?
@paulbond8244 Жыл бұрын
👍👍👍
@ayub_begimkulov Жыл бұрын
Спасибо!
@kolyunchikable Жыл бұрын
Материал очень полезный, но ты быстро говоришь, тяжело воспринимать такую насыщенную инфу в таком темпе, по крайне мере мне как начинающему. Хотя раньше еще быстрее говорил и скакал по коду, прогресс с предыдущими виде налицо! Спасибо за труд, продолжай в том же духе, Аюб!
@ayub_begimkulov Жыл бұрын
Принял, над речью еще работаю, согласен, что не идеал. Спасибо за фидбэк!
@user-pd9du9on6s Жыл бұрын
@@ayub_begimkulov мне наоброт кажется так лучше. В старых видосах говорил медленно, тихо и часто запинался. Сейчас все быстро, четко и громко.
@xice111 Жыл бұрын
ты можешь замедлить видео
@kolyunchikable Жыл бұрын
@@xice111 я так и делал иногда)
@v.demchenko Жыл бұрын
@@xice111 если тебе медленно ты можешь ускорить видео🤡
@SuccessMoron Жыл бұрын
Отлично! Когда-то начну писать на React, пока только VUE)
@ayub_begimkulov Жыл бұрын
И что тебе больше нравится?
@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 Жыл бұрын
Все верно, в рендере не надо обновлять реф. Я просто так сделал в начале для простоты. Если ты посмотришь видео дальше - то я объясняю этот момент, когда мы разбираем хук useLatest. Ну и статья есть о том, почему так не надо делать в описании.
@andreiostapenko288 Жыл бұрын
@@ayub_begimkulov А на сколько в целом актуален этот пример со states для inputs и хранением value из inputs в ref? Почему в таких кейсах не использовать useDebounce хук или относительно новый useDefferedValue из react
@levsonc 10 ай бұрын
Если обновление рефа стабильное - на ререндерах пишется одно и то же, то ничего страшного. Если нет, то в дев-режиме в strict mode полезут баги. Там рендер-функции, эффекты, стейты и редюсеры исполняются дважды, чтобы как раз отловить сайд-эффекты.
@maratgrigoryan1674 3 ай бұрын
Подскажите пожалуйста, почему в массив зависимостей для useLayoutEffect в хуке useLatest не добавить value? Это сделано специально для каких-то кейсов?
@user-uk5tj3qn5q Жыл бұрын
Большое спасибо за твои видео. У меня возник вопрос по поводу хука useIsMounted. Почему в нем не использовать useLayoutEffect?
@ayub_begimkulov Жыл бұрын
Можно и useLayoutEffect. Разницы нету. Просто обычно асинхронные экшены в useEffect запускают, поэтому как-то разницы у меня на практике и не было. Спасибо за фидбэк!
@user-uk5tj3qn5q Жыл бұрын
@@ayub_begimkulov Спасибо за быстрый ответ. Не понимание что useIsMounted нужен только для асинхронных функций рождает дурацкие вопросы)))
@user-uk5tj3qn5q Жыл бұрын
Потратил на поиск проблемы пол дня и понял что useEffect это оптимальное решение. 1. Если в хуке использовать useEffect а в компоненте useLayoutEffect то работать не будет потому что очередь вызовов. useLayoutEffect решает всем известную проблему с мерцанием(это когда мы внутри useEffect меняем состояние и отображаем его внутри компонента), но мерцание это про синхронный код а в нашем примере асинхронный код. Придумать кейса где в компоненте нам нужен useIsMounted внутри useLayoutEffect я не смог.(тут победа за useEffect) 2. Это косвенно относится к react. useLayoutEffect не работает в nextjs и выбрасывает исключение для обхода этой проблемы используют useIsomorphicLayoutEffect.(тут тоже победа за useEffect)
@user-oj4pt3fj2m Жыл бұрын
Интересно подойдет ли useEvent для первого примера с handleSubmit и почему useIsMounted использует useEffect, а не useLayoutEffect...
@ayub_begimkulov Жыл бұрын
useEvent подойдет конечно же, для useIsMoutned можно и useLayoutEffect использовать. Просто асинхронные действия ты делаешь обычно в useEffect, поэтому обычно он там только нужен будет.
@michaelkorolev1413 5 ай бұрын
@@ayub_begimkulov тоже когда смотрел подумал про useLayoutEffect, чтобы флаг точно поменялся до начала выполнения всех useEffect
@sergeysychev6581 Жыл бұрын
Подскажите, пожалуйста, зачем в hook useEvent используется apply, а не просто вызов функции?
@ayub_begimkulov Жыл бұрын
Можно и вызов функции. Разница нету. Это больше для того, чтобы spread лишнего избежать.
@user-qb7jg4hx5l 10 ай бұрын
Спасибо за видео. Объясни пожалуйста, в чём отличие useLatest от usePrevious в видео
@ayub_begimkulov 9 ай бұрын
useLatest нужен для того, чтобы ты мог использовать значение из стейта или пропсов внутри useCallback, useEffect и тд. без добавления из в зависимости. usePrevious нужен для того, чтобы получить предыдущее значение стейта или пропсов в рендере, чтобы на основе этого уже можно было выполнять какую-то логику. На самом деле бывает нужен только в специфичных кейсах.
@user-qb7jg4hx5l 9 ай бұрын
Понял, спасибо@@ayub_begimkulov
@user-pt6dk3yl2v Жыл бұрын
Подскажи пожалуйста какой у тебя шрифт, который на скринах?
@ayub_begimkulov Жыл бұрын
На скринах - это те, что с кодом? Если ты про них, то я не знаю названия, дефолтные из VSCode на маке. А если про презу - то это Arial)
@user-pt6dk3yl2v Жыл бұрын
@@ayub_begimkulov спасибо
@opexu 9 ай бұрын
Тупой вопрос, как человека незнакомого с реактом. А если без useRef колбэк обернуть в объект и передавать объект, то ссылка на объект ведь тоже не поменяется. Можно же без useRef обойтись?
@user-wt8sq9om6c Жыл бұрын
Очень хочется чтобы Айюб, говорил с паузами между предложениями. Потому что в процессе хочется подумать, о сказанном, а иногда просто не успеваешь 🥺🥺🥺
@sharkman6434 Жыл бұрын
На паузу ставьте и вдумывайтесь что он сказал , этот контент не для новичков, новичкам нужно постоянно вспоминать что такое пропс хук стейт и тп и тд ) и это мозг сильно грузит и из за этого сложно слушать и понимать, со временем и с опытом скорость восприятия поднимется. Он оч классно рассказывает я смотрю на скорости 1,5и это говорит о том что у него дикция хороша. Он один из немногих кто глубокие вещи показывает, не мешайте мастеру )
@user-wt8sq9om6c Жыл бұрын
@@sharkman6434 а чего сразу не на скорости 2х 😅 ???
@sharkman6434 Жыл бұрын
@@user-wt8sq9om6c на скорсти 2х Минина смотрю он медленее говорит, кстати попробуйте с минина начать и через годика два сюда уже заглянете ))
@user-wt8sq9om6c Жыл бұрын
@@sharkman6434 та минина уже смотрел давно, надо что то более интеллектуальное, и вот Айюб хорош, но только подача, как будто за айюбом кто-то гонится, это немного мешает. Если взять в вример uilbi, то он тоже быстро подаёт информацию, но у него нет именно спешки. И поэтом усваивается отлично.
@ayub_begimkulov Жыл бұрын
Над речью надо поработать - споров нету. Активно работаю над этим, надеюсь исправится в ближайших видео. Спасибо за фидбэк!
@YuryGoltsman Жыл бұрын
Так и не понял зачем в useEvent еще оборачивать в коллбек. Не проще ли в том же рефе держать входную и стабильную выходную функции?
@ayub_begimkulov Жыл бұрын
Это нужно для того, чтобы постоянно не писать cb.current() при вызове. А так можно использовать хук useLatest и все. Разница нету, просто для удобства сделано)
@lying6624 Жыл бұрын
Не знаю почему мой комментарий удалился, напишу снова. 1. Используй Profiler для наглядности, там лучше всё видно по целому дереву. 2. Прикладывай Git, чтобы потыкать можно было Прекрасное видео
@ayub_begimkulov Жыл бұрын
Git приложил в описание, почему то в это раз забыл. Вот ссылка: github.com/Ayub-Begimkulov/youtube-tutorials/tree/master/react-hooks/lessons/use-ref Касательно профайлера - даже не подумал. Спасибо за идею и за комментарий!
@AlexanderOsnovnoi Жыл бұрын
Есть ощущение, что пример с неконтролируемыми input, немножко "сферический в вакууме". Необходимость в использовании именно неконтролируемых полей возникает достаточно редко, но в целом очень хороший урок
@rustamakhmetyanov4404 Жыл бұрын
у меня в формах частенько встречается, но это может быть изз того что я сам неправильно пишу формы=)
@AlexanderOsnovnoi Жыл бұрын
@@rustamakhmetyanov4404 Ну если на формах какая-то сложная логика, требующая работы с нативными DOMNode, то вполне возможно, но я достаточно редко пользуюсь неконтролируемыми состояниями
@ayub_begimkulov Жыл бұрын
Тут на самом деле все примеры "сферические в вакууме". Так как из реально проекта я один пример буду пол урока объяснять. Скорее нужно понять принцип. Бывают случаи, когда у тебя есть четкий флоу, который задумывался реактом - с новым стейтом обновляются все зависимости. Однако в кейсе с формой, наш колбэк вообще не был завязан на стейт, ему просто нужен был способ получать его актуальное значение, а сам он вешался на ивент пользователя. На самом деле такой флоу зачастую нужен именно с функциями, поэтому и был RFC на useEvent hook. А в целом, спасибо за фидбэк. Постараюсь поработать над примерами!
@ayub_begimkulov Жыл бұрын
На самом деле многие библиотеки используют подход с uncontrolled формами, так как он более оптимальный для перформанса.
@opexu 9 ай бұрын
*Когда включил god mode для js
@jaloliddinhaqnazarov Жыл бұрын
Ayub hozir Yandexda ishlayapsizmi
@ayub_begimkulov Жыл бұрын
Нет, я уже не работаю в Яндексе.
@8lop966 Жыл бұрын
@@ayub_begimkulov кстати , интересно было б услышать твою историю как ты попал в яндекс, там вроде тяжело пробиться
@opexu 9 ай бұрын
Уже говорили, что ты знаешь реакт лучше, чем его разрабы?
@user-qn3gm2we5f Жыл бұрын
Метишь на конкуренцию с ульби по быстроте подачи)) Материал однозначно не для новичков, а для опытных кодеров, хотя примеры и разбираются на инпутах.
@ayub_begimkulov Жыл бұрын
По тому, что мне советуют подавать информацию спокойно "как улби", я могу сделать вывод, что по скорости подачи я абсолютный чемпион!
@ayub_begimkulov Жыл бұрын
А если серьезно, то в новых видео вроде этот момент должен по лучше стать. Спасибо за фидбэк!
@AlexeyProgramming Жыл бұрын
Писали бы дальше на классовых компонентах, бед бы не знали. Нет надо было ввести функциональные чтобы потом бороться с их проблемами, погружаться в вечный рефакторинг и оптимизации, писать подобные вермишели из хуков для простейших вещей)))) Ну ререндерится он чаще, ну евенты добавляются-удаляются каждый ререндер, если нет импакта на перфоманс вы просто тратите деньги заказчика на premature meaningless optimization и боритесь с квирками библиотеки каждый раз изобретая велосипед, который кстати давно уже должен был быть внутри реакта 🤭
@just__did__it Жыл бұрын
16:45 В жизни не поверю, что идею Дениса Абрамовича отвергнули😮
@ayub_begimkulov Жыл бұрын
Да там у всех контрибьюторов много идей разных, которые отвергают. Никто тут не исключение.
@user-uk5tj3qn5q Жыл бұрын
Просто ты плохо понимаешь суть слова use. Например useТутИдетНазваниеКостыля. Уловил суть?
@just__did__it Жыл бұрын
@@user-uk5tj3qn5q Дэн легенда
@user-uk5tj3qn5q Жыл бұрын
@@just__did__it Проблема не в дэне а в количестве костылей для реакта.
@user-uk5tj3qn5q Жыл бұрын
@@just__did__it Хотел промолчать но немогу эта фраза дэн легенда меня все таки сильно зацепила. Слушай корпорация зла тратит миллионы долларов чтобы дэн рекламировал реакт и при этом реакт можно скачать в открытом доступе(звучит как благотворительность), думаешь эти парни хорошие и думают о нас? Ответ нет. Корпорация всегда заинтересована в прибыли или уменьшении убытков. Дэн рекламируя реакт дает компании дешевых программистов то есть они не думают о нас они просто хотят получить более дешевую раб силу на галеру))).
@v.demchenko Жыл бұрын
Прям очнь быстро говоришь. Я думаю было бы лучше сделать несколько видео где ты пишешь сам код и обьясняешь.
@kimanowka Жыл бұрын
можно еще быстрее говорить?)
@ayub_begimkulov Жыл бұрын
Я слышал, что в ютубе 2х можно поставить) А если серьезно, то работаю над речью - постараюсь улучшить этот момент. Спасибо за фидбэк!
@mistrebrown7642 Жыл бұрын
Инфа полезная, но плохо структурировано, из-за чего воспринимать ну оооочень тяжело
@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 Жыл бұрын
Да, так тоже можно)
Braincatchers
Рет қаралды 4,5 МЛН
Ayub Begimkulov
Рет қаралды 9 М.
Артём Шумейко
Рет қаралды 15 М.
Braincatchers
Рет қаралды 4,5 МЛН