Недавно наткнулся на проблему с собственноручно написанным дебоунсом. Суть в том, что колбэк в дебаунсе постоянно подхватывал значения стэйта предыдущего рендера. Пришлось лезть в библиотеку use denounce и смотреть как ребята решили эту проблему. Долго не мог и там понять, а оказалось нужно было использовать реф😂😂. Спасибо за глубокий контент!!! ❤
Спасибо за видео ! ОЧень информативно) Только есть один вопрос, не совсем понял почему на 18 минуте мы возвращаем реф через apply. Есть какие-то кейсы, где колбэк может случайно взять какой-то this ?
Можно и useLayoutEffect. Разницы нету. Просто обычно асинхронные экшены в useEffect запускают, поэтому как-то разницы у меня на практике и не было. Спасибо за фидбэк!
Потратил на поиск проблемы пол дня и понял что useEffect это оптимальное решение. 1. Если в хуке использовать useEffect а в компоненте useLayoutEffect то работать не будет потому что очередь вызовов. useLayoutEffect решает всем известную проблему с мерцанием(это когда мы внутри useEffect меняем состояние и отображаем его внутри компонента), но мерцание это про синхронный код а в нашем примере асинхронный код. Придумать кейса где в компоненте нам нужен useIsMounted внутри useLayoutEffect я не смог.(тут победа за useEffect) 2. Это косвенно относится к react. useLayoutEffect не работает в nextjs и выбрасывает исключение для обхода этой проблемы используют useIsomorphicLayoutEffect.(тут тоже победа за useEffect)
Аюб, добрый вечер) Спасибо большое за видео) Есть вопрос! В доке реакта такая информация написанна про 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." А мы в первом примере делаем это во время рендера, где тут правда и как разобраться? Спасибо)
Все верно, в рендере не надо обновлять реф. Я просто так сделал в начале для простоты. Если ты посмотришь видео дальше - то я объясняю этот момент, когда мы разбираем хук useLatest. Ну и статья есть о том, почему так не надо делать в описании.
@@ayub_begimkulov А на сколько в целом актуален этот пример со states для inputs и хранением value из inputs в ref? Почему в таких кейсах не использовать useDebounce хук или относительно новый useDefferedValue из react
Если обновление рефа стабильное - на ререндерах пишется одно и то же, то ничего страшного. Если нет, то в дев-режиме в strict mode полезут баги. Там рендер-функции, эффекты, стейты и редюсеры исполняются дважды, чтобы как раз отловить сайд-эффекты.
Подскажите пожалуйста, почему в массив зависимостей для useLayoutEffect в хуке useLatest не добавить value? Это сделано специально для каких-то кейсов?
useLatest нужен для того, чтобы ты мог использовать значение из стейта или пропсов внутри useCallback, useEffect и тд. без добавления из в зависимости. usePrevious нужен для того, чтобы получить предыдущее значение стейта или пропсов в рендере, чтобы на основе этого уже можно было выполнять какую-то логику. На самом деле бывает нужен только в специфичных кейсах.
Материал очень полезный, но ты быстро говоришь, тяжело воспринимать такую насыщенную инфу в таком темпе, по крайне мере мне как начинающему. Хотя раньше еще быстрее говорил и скакал по коду, прогресс с предыдущими виде налицо! Спасибо за труд, продолжай в том же духе, Аюб!
Тупой вопрос, как человека незнакомого с реактом. А если без useRef колбэк обернуть в объект и передавать объект, то ссылка на объект ведь тоже не поменяется. Можно же без useRef обойтись?
Это нужно для того, чтобы постоянно не писать cb.current() при вызове. А так можно использовать хук useLatest и все. Разница нету, просто для удобства сделано)
useEvent подойдет конечно же, для useIsMoutned можно и useLayoutEffect использовать. Просто асинхронные действия ты делаешь обычно в useEffect, поэтому обычно он там только нужен будет.
Есть ощущение, что пример с неконтролируемыми input, немножко "сферический в вакууме". Необходимость в использовании именно неконтролируемых полей возникает достаточно редко, но в целом очень хороший урок
@@rustamakhmetyanov4404 Ну если на формах какая-то сложная логика, требующая работы с нативными DOMNode, то вполне возможно, но я достаточно редко пользуюсь неконтролируемыми состояниями
Тут на самом деле все примеры "сферические в вакууме". Так как из реально проекта я один пример буду пол урока объяснять. Скорее нужно понять принцип. Бывают случаи, когда у тебя есть четкий флоу, который задумывался реактом - с новым стейтом обновляются все зависимости. Однако в кейсе с формой, наш колбэк вообще не был завязан на стейт, ему просто нужен был способ получать его актуальное значение, а сам он вешался на ивент пользователя. На самом деле такой флоу зачастую нужен именно с функциями, поэтому и был RFC на useEvent hook. А в целом, спасибо за фидбэк. Постараюсь поработать над примерами!
Не знаю почему мой комментарий удалился, напишу снова. 1. Используй Profiler для наглядности, там лучше всё видно по целому дереву. 2. Прикладывай Git, чтобы потыкать можно было Прекрасное видео
Git приложил в описание, почему то в это раз забыл. Вот ссылка: github.com/Ayub-Begimkulov/youtube-tutorials/tree/master/react-hooks/lessons/use-ref Касательно профайлера - даже не подумал. Спасибо за идею и за комментарий!
На паузу ставьте и вдумывайтесь что он сказал , этот контент не для новичков, новичкам нужно постоянно вспоминать что такое пропс хук стейт и тп и тд ) и это мозг сильно грузит и из за этого сложно слушать и понимать, со временем и с опытом скорость восприятия поднимется. Он оч классно рассказывает я смотрю на скорости 1,5и это говорит о том что у него дикция хороша. Он один из немногих кто глубокие вещи показывает, не мешайте мастеру )
@@sharkman6434 та минина уже смотрел давно, надо что то более интеллектуальное, и вот Айюб хорош, но только подача, как будто за айюбом кто-то гонится, это немного мешает. Если взять в вример uilbi, то он тоже быстро подаёт информацию, но у него нет именно спешки. И поэтом усваивается отлично.
@@just__did__it Хотел промолчать но немогу эта фраза дэн легенда меня все таки сильно зацепила. Слушай корпорация зла тратит миллионы долларов чтобы дэн рекламировал реакт и при этом реакт можно скачать в открытом доступе(звучит как благотворительность), думаешь эти парни хорошие и думают о нас? Ответ нет. Корпорация всегда заинтересована в прибыли или уменьшении убытков. Дэн рекламируя реакт дает компании дешевых программистов то есть они не думают о нас они просто хотят получить более дешевую раб силу на галеру))).
Писали бы дальше на классовых компонентах, бед бы не знали. Нет надо было ввести функциональные чтобы потом бороться с их проблемами, погружаться в вечный рефакторинг и оптимизации, писать подобные вермишели из хуков для простейших вещей)))) Ну ререндерится он чаще, ну евенты добавляются-удаляются каждый ререндер, если нет импакта на перфоманс вы просто тратите деньги заказчика на premature meaningless optimization и боритесь с квирками библиотеки каждый раз изобретая велосипед, который кстати давно уже должен был быть внутри реакта 🤭
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
очень актуальное видео
уверен что многие использовали реф только для доступа к отрендеренным элементам
примеры хорошие и реалистичные
Спасибо!
Такое ощущение,что подача изменилась,стала такой размеренной и более спокойной.
Надеюсь это не только ощущение)
@@ayub_begimkulov тоже обратил на это внимание. Видео очень полезное, спасибо!
В любом случае нужно скорость 0.75 ставить, что бы успевать улавливать мысль)
Очень сложно вообще понимать о чем речь все равно
я уже раз 8 возвращаюсь к этому видео, решил несколько проблемных моментов с оптимизацеий благодаря этой информации, спасибо)
Это классно, что применяешь информацию на практике. Спасибо за фидбэк!
Очень хорошая подача информации, в темпе и ничего лишнего. Спасибо, было интересно посмотреть.
Спасибо!
Спасибо, Аюб. Буквально в пятницу колхозил свой useWindowEvent, но немного спотыкнулся, а тут твоя неотложная помощь, очень к месту)
Круто! Рад, что помог.
👍👍👍, я столько смотрел предыдущий плейлист, что в этот раз всё понял с первого раза😂😂😂
поздравляю!
Очень крутой и полезный контент, не останавливайся, подписота будет расти :)
Спасибо!
Очень полезно. Спасибо) И качество подачи сильно выросло.
Спасибо!
Очень крутое видео!! Спасибо!
не за что!
огонь контент, спасибо!
Спасибо за фидбэк!
Видео как всегда топ, давай ещё!)
Спасибо!
Как всегда видео топчик, нужно писать еще раз вместе с тобой чтобы уж точно понять и помнить, спасибо за интересный и полезный урок
Можно просто репу склонить и там поиграться, как вариант.
Просто огонь🔥
Спасибо!
Недавно наткнулся на проблему с собственноручно написанным дебоунсом. Суть в том, что колбэк в дебаунсе постоянно подхватывал значения стэйта предыдущего рендера. Пришлось лезть в библиотеку use denounce и смотреть как ребята решили эту проблему. Долго не мог и там понять, а оказалось нужно было использовать реф😂😂. Спасибо за глубокий контент!!! ❤
рад помочь)
Интересный ролик! Моё почтение 🤝
Спасибо!
спасибо!👏👍
Не за что!
Я кайфанул🔥
Это хорошо!
комментарий в поддержку канала
Спасибо!
Сильный Аюб
Спасибо!
Раньше не понимал а сейчас как понял
круто!
Спасибо за видео ! ОЧень информативно) Только есть один вопрос, не совсем понял почему на 18 минуте мы возвращаем реф через apply. Есть какие-то кейсы, где колбэк может случайно взять какой-то this ?
Большое спасибо за твои видео. У меня возник вопрос по поводу хука useIsMounted. Почему в нем не использовать useLayoutEffect?
Можно и useLayoutEffect. Разницы нету. Просто обычно асинхронные экшены в useEffect запускают, поэтому как-то разницы у меня на практике и не было. Спасибо за фидбэк!
@@ayub_begimkulov Спасибо за быстрый ответ. Не понимание что useIsMounted нужен только для асинхронных функций рождает дурацкие вопросы)))
Потратил на поиск проблемы пол дня и понял что useEffect это оптимальное решение.
1. Если в хуке использовать useEffect а в компоненте useLayoutEffect то работать не будет потому что очередь вызовов. useLayoutEffect решает всем известную проблему с мерцанием(это когда мы внутри useEffect меняем состояние и отображаем его внутри компонента), но мерцание это про синхронный код а в нашем примере асинхронный код. Придумать кейса где в компоненте нам нужен useIsMounted внутри useLayoutEffect я не смог.(тут победа за useEffect)
2. Это косвенно относится к react. useLayoutEffect не работает в nextjs и выбрасывает исключение для обхода этой проблемы используют useIsomorphicLayoutEffect.(тут тоже победа за useEffect)
👍👍👍
Спасибо!
Хороший контент, раз такое дело, мб про Next серию роликом))
Можно подумать, добавлю себе в список.
Аюб, добрый вечер) Спасибо большое за видео)
Есть вопрос!
В доке реакта такая информация написанна про 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."
А мы в первом примере делаем это во время рендера, где тут правда и как разобраться? Спасибо)
Все верно, в рендере не надо обновлять реф. Я просто так сделал в начале для простоты.
Если ты посмотришь видео дальше - то я объясняю этот момент, когда мы разбираем хук useLatest. Ну и статья есть о том, почему так не надо делать в описании.
@@ayub_begimkulov А на сколько в целом актуален этот пример со states для inputs и хранением value из inputs в ref? Почему в таких кейсах не использовать useDebounce хук или относительно новый useDefferedValue из react
Если обновление рефа стабильное - на ререндерах пишется одно и то же, то ничего страшного. Если нет, то в дев-режиме в strict mode полезут баги. Там рендер-функции, эффекты, стейты и редюсеры исполняются дважды, чтобы как раз отловить сайд-эффекты.
Подскажите пожалуйста, почему в массив зависимостей для useLayoutEffect в хуке useLatest не добавить value? Это сделано специально для каких-то кейсов?
Самое простое действие для оптимизации, это вынести логику из компонента 😊
Это не всегда возможно, но решение хорошее.
Спасибо за видео.
Объясни пожалуйста, в чём отличие useLatest от usePrevious в видео
useLatest нужен для того, чтобы ты мог использовать значение из стейта или пропсов внутри useCallback, useEffect и тд. без добавления из в зависимости.
usePrevious нужен для того, чтобы получить предыдущее значение стейта или пропсов в рендере, чтобы на основе этого уже можно было выполнять какую-то логику. На самом деле бывает нужен только в специфичных кейсах.
Понял, спасибо@@ayub_begimkulov
Подскажите, пожалуйста, зачем в hook useEvent используется apply, а не просто вызов функции?
Можно и вызов функции. Разница нету. Это больше для того, чтобы spread лишнего избежать.
Материал очень полезный, но ты быстро говоришь, тяжело воспринимать такую насыщенную инфу в таком темпе, по крайне мере мне как начинающему. Хотя раньше еще быстрее говорил и скакал по коду, прогресс с предыдущими виде налицо! Спасибо за труд, продолжай в том же духе, Аюб!
Принял, над речью еще работаю, согласен, что не идеал. Спасибо за фидбэк!
@@ayub_begimkulov мне наоброт кажется так лучше. В старых видосах говорил медленно, тихо и часто запинался. Сейчас все быстро, четко и громко.
ты можешь замедлить видео
@@xice111 я так и делал иногда)
@@xice111 если тебе медленно ты можешь ускорить видео🤡
Тупой вопрос, как человека незнакомого с реактом. А если без useRef колбэк обернуть в объект и передавать объект, то ссылка на объект ведь тоже не поменяется. Можно же без useRef обойтись?
Так и не понял зачем в useEvent еще оборачивать в коллбек. Не проще ли в том же рефе держать входную и стабильную выходную функции?
Это нужно для того, чтобы постоянно не писать cb.current() при вызове. А так можно использовать хук useLatest и все. Разница нету, просто для удобства сделано)
Интересно подойдет ли useEvent для первого примера с handleSubmit и почему useIsMounted использует useEffect, а не useLayoutEffect...
useEvent подойдет конечно же, для useIsMoutned можно и useLayoutEffect использовать. Просто асинхронные действия ты делаешь обычно в useEffect, поэтому обычно он там только нужен будет.
@@ayub_begimkulov тоже когда смотрел подумал про useLayoutEffect, чтобы флаг точно поменялся до начала выполнения всех useEffect
Есть ощущение, что пример с неконтролируемыми input, немножко "сферический в вакууме". Необходимость в использовании именно неконтролируемых полей возникает достаточно редко, но в целом очень хороший урок
у меня в формах частенько встречается, но это может быть изз того что я сам неправильно пишу формы=)
@@rustamakhmetyanov4404 Ну если на формах какая-то сложная логика, требующая работы с нативными DOMNode, то вполне возможно, но я достаточно редко пользуюсь неконтролируемыми состояниями
Тут на самом деле все примеры "сферические в вакууме". Так как из реально проекта я один пример буду пол урока объяснять.
Скорее нужно понять принцип. Бывают случаи, когда у тебя есть четкий флоу, который задумывался реактом - с новым стейтом обновляются все зависимости.
Однако в кейсе с формой, наш колбэк вообще не был завязан на стейт, ему просто нужен был способ получать его актуальное значение, а сам он вешался на ивент пользователя.
На самом деле такой флоу зачастую нужен именно с функциями, поэтому и был RFC на useEvent hook.
А в целом, спасибо за фидбэк. Постараюсь поработать над примерами!
На самом деле многие библиотеки используют подход с uncontrolled формами, так как он более оптимальный для перформанса.
Подскажи пожалуйста какой у тебя шрифт, который на скринах?
На скринах - это те, что с кодом? Если ты про них, то я не знаю названия, дефолтные из VSCode на маке.
А если про презу - то это Arial)
@@ayub_begimkulov спасибо
Не знаю почему мой комментарий удалился, напишу снова.
1. Используй Profiler для наглядности, там лучше всё видно по целому дереву.
2. Прикладывай Git, чтобы потыкать можно было
Прекрасное видео
Git приложил в описание, почему то в это раз забыл.
Вот ссылка:
github.com/Ayub-Begimkulov/youtube-tutorials/tree/master/react-hooks/lessons/use-ref
Касательно профайлера - даже не подумал. Спасибо за идею и за комментарий!
Очень хочется чтобы Айюб, говорил с паузами между предложениями. Потому что в процессе хочется подумать, о сказанном, а иногда просто не успеваешь 🥺🥺🥺
На паузу ставьте и вдумывайтесь что он сказал , этот контент не для новичков, новичкам нужно постоянно вспоминать что такое пропс хук стейт и тп и тд ) и это мозг сильно грузит и из за этого сложно слушать и понимать, со временем и с опытом скорость восприятия поднимется. Он оч классно рассказывает я смотрю на скорости 1,5и это говорит о том что у него дикция хороша. Он один из немногих кто глубокие вещи показывает, не мешайте мастеру )
@@sharkman6434 а чего сразу не на скорости 2х 😅 ???
@@ИгорьНово на скорсти 2х Минина смотрю он медленее говорит, кстати попробуйте с минина начать и через годика два сюда уже заглянете ))
@@sharkman6434 та минина уже смотрел давно, надо что то более интеллектуальное, и вот Айюб хорош, но только подача, как будто за айюбом кто-то гонится, это немного мешает. Если взять в вример uilbi, то он тоже быстро подаёт информацию, но у него нет именно спешки. И поэтом усваивается отлично.
Над речью надо поработать - споров нету. Активно работаю над этим, надеюсь исправится в ближайших видео. Спасибо за фидбэк!
Ayub hozir Yandexda ishlayapsizmi
Нет, я уже не работаю в Яндексе.
@@ayub_begimkulov кстати , интересно было б услышать твою историю как ты попал в яндекс, там вроде тяжело пробиться
Уже говорили, что ты знаешь реакт лучше, чем его разрабы?
*Когда включил god mode для js
16:45 В жизни не поверю, что идею Дениса Абрамовича отвергнули😮
Да там у всех контрибьюторов много идей разных, которые отвергают. Никто тут не исключение.
Просто ты плохо понимаешь суть слова use. Например useТутИдетНазваниеКостыля. Уловил суть?
@@ПетрПетров-ж9е Дэн легенда
@@just__did__it Проблема не в дэне а в количестве костылей для реакта.
@@just__did__it Хотел промолчать но немогу эта фраза дэн легенда меня все таки сильно зацепила.
Слушай корпорация зла тратит миллионы долларов чтобы дэн рекламировал реакт и при этом реакт можно скачать в открытом доступе(звучит как благотворительность), думаешь эти парни хорошие и думают о нас? Ответ нет. Корпорация всегда заинтересована в прибыли или уменьшении убытков. Дэн рекламируя реакт дает компании дешевых программистов то есть они не думают о нас они просто хотят получить более дешевую раб силу на галеру))).
Писали бы дальше на классовых компонентах, бед бы не знали. Нет надо было ввести функциональные чтобы потом бороться с их проблемами, погружаться в вечный рефакторинг и оптимизации, писать подобные вермишели из хуков для простейших вещей)))) Ну ререндерится он чаще, ну евенты добавляются-удаляются каждый ререндер, если нет импакта на перфоманс вы просто тратите деньги заказчика на premature meaningless optimization и боритесь с квирками библиотеки каждый раз изобретая велосипед, который кстати давно уже должен был быть внутри реакта 🤭
Прям очнь быстро говоришь. Я думаю было бы лучше сделать несколько видео где ты пишешь сам код и обьясняешь.
Метишь на конкуренцию с ульби по быстроте подачи))
Материал однозначно не для новичков, а для опытных кодеров, хотя примеры и разбираются на инпутах.
По тому, что мне советуют подавать информацию спокойно "как улби", я могу сделать вывод, что по скорости подачи я абсолютный чемпион!
А если серьезно, то в новых видео вроде этот момент должен по лучше стать. Спасибо за фидбэк!
можно еще быстрее говорить?)
Я слышал, что в ютубе 2х можно поставить)
А если серьезно, то работаю над речью - постараюсь улучшить этот момент.
Спасибо за фидбэк!
Инфа полезная, но плохо структурировано, из-за чего воспринимать ну оооочень тяжело
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!
}
Да, так тоже можно)