useEffect в React. Исправляем частую ошибку
Вставка
- Опубліковано 4 сер 2024
- В этом видео мы рассмотрим хуки useEffect и useLayoutEffect, разберем их отличия, а также ознакомимся с очень распространенной ошибкой, которая может привести к race conditions и способами ее исправления
Telegram - t.me/snr_fullstack
00:00 - Почему важно понимать useEffect
00:45 - Что такое useEffect
03:00 - Сноска про batching
03:45 - fetch запрос внутри useEffect
05:28 - cleanup функция
08:40 - Race conditions!
12:45 - useLayoutEffect
14:43 - useInsertionEffect
15:00 - Итоги
Супер! Хотелось бы еще посмотреть про аборт контроллер и другие полезные паттерны в реакте. И само собой useInsertionEffect, тоже интересно
Огромное спасибо за видео! Объяснять такие нюансы очень важно!
Чувак, ну ты хитрец, я увидел видосик на превьюхе которого было указано useInsertionEffect, просмотрел весь видос, в ожидании разбора этого хука, а его то и не было))) Ну ладно, материал годный, говоришь интересно, а я повторил то что уже знал, в целом время потрачено не зря))
С телефона не смотрительно, но по сути вкусно
Спасибо, за видео. Кратко, чётко и доступно.
Супер наглядно и понятно подан материал, спасибо!
довольно доходчиво) Единственное, это мелкий шрифт, но я думаю, что это уже исправлено в последующих видео. Спасибо
Хорошая подача материала, ждем новые видео)
Классно объясняешь. Без лишней воды. Подписался)
Спасибо за подробное объяснение! Однозначно подписка
Очень жду про батчинг, отличная подача!
Спасибо за полезный ролик, не почерпнул чего-то нового, но качество материала и его подача выглядят очень годно
Спасибо за видео! Очень интересно узнавать такие вещи будучи начинающим
Попался ролик в рекомендациях. Хорошее дело делаешь! Лайк + подписка) Продолжай в том же духе, желаю развития твоему каналу
Спасибо!
Было интересно послушать про race conditions, жду видео про batching
очень полезно. Спасибо за твое время
Шикарное видео, благодарю !
Да, он в кор-тиме реакта !
Посмотрел, продолжил делать проект, заметил у себя при подгрузке данных с апи через useeffect моргание, вспомнил твой видос и пофиксил просто добавив uselayouteffect, спасибо за контент)
За хорошие примеры, отдельно спасибо! А то большая часть на ютубе это стандартные, из доков)
первый раз ваще вижу, чтоб кто-то рассказал про race-conditions - красава, вот что значит сеньер) я сам как раз через баг познакомился с этой болью
кстати еще можно легко получить утечку, если промис подвиснет, а ты замкнул сет стейт, твой компонент после анмаунта будет жить пока промис не раздуплится, потому для таких вещей ваще стоит использовать внешние сторы, ну или на крайняк позаботиться о том, что промис имеет ограничение "на жизнь"
Бро не сдавайся понимаю просмотров пока мало, запили как происходит рендер в реакте, какая очередность компонентов юзефектов, поддержу лайком)
Очень полезно, годный контент.Огромная благодарность за проделанную работу! Прям от души 🙏 . Будут ли практики по React типа марафона??
Балдеж, бро. Только увеличь код пожалуйста, а то на телефоне вообще ничего не видно
Привет! Можешь сделать видео по всем (во многом использующимся) хукам, и показать как их использовать чтоб не рендерился вся страница, а только определенный компонент
кайф
про батчинг в реакте есть интересная вещь, если вызывать сетстейт в rAF (requestAnimationFrame) он батчится не будет.
Привет! Подскажи, какое расширение отвечает за сведения о параметрах функции? например useEffect( effect: () => {...})
Спасибо за видео!
Почему при вызове функции setModalIsVisible в качестве аргумента передаётся не bool значение, а функция
(p) => !p
Видос отличный,но,пожалуйста,либо сделай окно вс кода побольше или увеличь шрифт,а то приходится прям вглядываться :(
Почему handleResize не внутри useEffect, где он используется?
Хорошие видео, но примеры немного тяжеловаты) посмотрел два видео и в обоих увидел, что они тяжеловаты для восприятия, плюс код примеров мелкий) понимаю хочется отобразить весь код, но если сделать код попроще, то и размер шрифта можно будет увеличить
А что это за расширение, которое подсвечивает название параметров?
Прошу хотя бы при монтаже увеличить громкость звука, слишком тихо.
На будущее: автор, измените масштаб на более крупный при записи видео. Я не слепой, но разглядывать мелкие буковки, сами понимаете... так опытные стримеры не делают. Заранее благодарю
Отличный разбор. Но смотреть с телефона затруднительно, поскольку шрифт кода мелковат.
можно код сделать более масштабированее?
Хочу знать почему рендерится 2 раза
useEffect react
Познавательное видео, спасибо, но ты ж понимаешь, что в твоем случае отписка не произойдет)
@@senior_zone для handleResize нужно как то сохранить ссылку, т.е. чтобы в addEventListener и removeEventListener она была одинаковая. В вашем примере при первом же обновлении state эта ссылка потеряется, т.к. handleResize не замемоизирован
@@Dmitriy-bq2xh Можешь подробнее объяснить чуток,почему она не произойдет,оно же на маунте инициализирует функцию handleResize и в теории если компонент не произведет больше апдейтов,то ссылка на функцию остается той же самой.
@@Dmitriy-bq2xh по факту,ему просто надо handleResize создавать внутри этого useEffect'a и тогда вообще никаких проблем быть не должно.
@@701block да это классное решение, а теперь представь что твой handleResize для вычисления будет использовать какой нибудь входящий в компонент пропс ....)и это жиза
@@senior_zone Сдаюсь! Согласен, сработали рефлексы)Невнимательно посмотрел на список зависимостей. Ведь в данном случае правила оформления реакт хуков будут ругаться, указывая на то, что вы не добавили в список зависимостей функцию handleResize. "Значит, вы что-то не договариваете" говорят они. Лучшем решением как уже было написано выше будет: переместить эту функцию в эффект
не совсем понятное объяснение по функции очистки, он как с ней так и без нее , фунеция эффекта всё равно отработала
Очень мелко
Ну вот зачем нужно пользоваться инструментами пропагандистов и рекламщиков? Если на картинке (или в названии) что то заявлено, расскажи об этом! Просмотрел бесполезный для меня ролик из-за заявленного useInsertionEffect, и что я получил? А получил я желание поставить дизлайк и забанить канал, даже несмотря на хоорошую подачу материала. Учитывайте, пожалуйста, это при создании контента
@@senior_zone спасибо
НИШТЯК
ЗАПИЛИ ПЛИЗ ВИДОСЫ ПРО ВСЕ ОСНОВНЫЕ ХУКИ🙃