Друзя, в данном видео я совершил ошибку, сказав то, что в React 18 useEffect вызывается асинхронно через micro-таску. На самом деле он вызывается синхронно. Подробнее все разобрал вот в этом видео -- ua-cam.com/video/UbQJWpwensk/v-deo.html.
Аюб, привет, спасибо за погружение в реакт если мне не изменяет память в новых версиях react synthetic event не погружается до уровня document и останавливается на root элементе приложения, поэтому если слушать события клика на root элементе, то все будет работать
Рад, что понравилось! Про настройку ты имеешь в виду именно обзор конфигурации? Я планировал по оптимизациям сделать видео либо плейлист. А по конфигурации можно в интернете поискать. Касательно вебпак - у них очень хорошая документация, советую.
Увидел в проекте vite. Было бы очень интересно (хотя бы как пост в тлг) услышать твое мнение о вите и стоит ли его юзать в проде/деве с реактом или даже некстом, имеет ли смысл переносить старые проекты на вит (наслышан о проблеме с env переменными). Спасибо за видео!
Я не Ayub, но тоже отвечу. Использовать стоит. Он в дев очень быстрый из-за того, что под капотом esbuild. А в проде хорошие дефолтные настройки, которые сильно менять не нужно. С переменными проблема да. В next'е использовать vite спорно как по мне. Они свой же сборщик делают и явно на него все силы будут брошены. Стоит ли переносить старые проекты? Ну смотря насколько они большие. Если малые средние, то больше дня не займёт по идее. Большие наверное не стоит. Особенно если надо переводить и просто сборку, и сторибук, и много плагинов
@@baileysli6235 Да, некст пилят свой сборщик, но он сейчас в альфе и двигается не особо быстро. У нас проект на нексте, и он порядка нескольких секунд билдится между изменениями. становится очень тяжело (
А самое интересное, что если вешать outside листенер не на document, а например на document.getElementById("root"), то все будет работать как надо и без stopPropagation. Думаю тут дело не во всплытии, а в том, что реакт сам эмулирует механизм всплытия для "своих" элементов (при чем микротасками), и только после этого эмитит событие выше по "нативному" дому (макротаской).
Да, ты прав. Если навесить обработчик на рут - то все будет работать, как нужно. Однако то, как ты описываешь работу ивентов в реакт - не совсем верно. У самого реакта в целом нету механизма всплытия. Он навешивает 1 обработчик на root, затем уже по target'у определяет какие хендлеры из компонентов надо вызвать. Причем если обработчик висит на дочернем и родительском элементе - то они будут вызываться снизу вверх синхронно. То есть асинхронного всплытия у синтетических ивентов нету. Ну и в целом, нельзя взять, остановить ивенты на руте. И затем эмитить их дальше макротаской. Вообще все ивенты который ты эмитишь сам программно не будут асинхронными. У них будет стоять флаг isTrusted - false, и уже обработчики все будут вызываться синхронно.
Пытался воспроизвести такое поведение на очень похожем примере, но у меня повторный клик не срабатывает. Все логи срабатывают в такой же последовательности, но второго outside click не происходит. Единственное отличие - стейт хранится в редаксе (вместо setOpened вызывается dispatch).
@@pavelnedved1901 setState классовых компонентов не тоже самое что сет функция useState, которая под копотом называется диспач и работает совершенно подругому
то есть в момент пока событие click происходит по button, успевает навешиваться хэндлер на document и на нем тоже начинает отрабатывать событие click?, немного не понял этот момент
Нет, js однопоточный, такого не может быть. Событие происходит на button, однако оно не сразу доходит до документа (тут человек правильно наводку дал на всплытие). Из-за приоритетности микротасок обновление компонента происходит раньше, поэтому к тому моменту когда ивент "всплывет" до документа, там уже будет навешен outside click обработчик. Получается у нас флоу такой: 1) Ивент на кнопке 2) Обновление React 3) Всплытие ивента до родительских элементов
Подскажите пжл: этот уровень знания какому уровню программиста должен соответствовать ? Я только 4й месяц изучаю и только пока основы ( синтаксис, html и css) и до библиотек\технологий не дошел но при просмотре видео как будто человек на арабском разговаривает. Звуки знакомые , пару слов даже вроде уже знаю но 99% не понятно.
Друзя, в данном видео я совершил ошибку, сказав то, что в React 18 useEffect вызывается асинхронно через micro-таску. На самом деле он вызывается синхронно. Подробнее все разобрал вот в этом видео -- ua-cam.com/video/UbQJWpwensk/v-deo.html.
комментарий в поддержку канала
Спасибо!
Поддержу автора и канал комментарием! Спасибо за контент)
не за что!
Спасибо за материал! Годнота!
не за что!
Аюб, подскажи, пожалуйста, что у тебя за кресло? :D
Очень долго ищу хорошее, т.к. очень долго за компом сижу
А я сам не знаю, какой-то ноунейм) взял его на местном рынке техники.
Хорошее видео. Спасибо)))
Не за что!
Привет . Можешь подсказать где ты читал или как гуглил про useEffect и как он работает ( в смысле это микро или макро таска )
Аюб, привет, спасибо за погружение в реакт
если мне не изменяет память в новых версиях react synthetic event не погружается до уровня document и останавливается на root элементе приложения, поэтому если слушать события клика на root элементе, то все будет работать
Аюб, я очень благодарен тебя за предоставленный контент! Было бы возможность, чтобы ты сделал видео о том как настроить сборщики спс
Рад, что понравилось! Про настройку ты имеешь в виду именно обзор конфигурации?
Я планировал по оптимизациям сделать видео либо плейлист. А по конфигурации можно в интернете поискать. Касательно вебпак - у них очень хорошая документация, советую.
👏👍
Увидел в проекте vite. Было бы очень интересно (хотя бы как пост в тлг) услышать твое мнение о вите и стоит ли его юзать в проде/деве с реактом или даже некстом, имеет ли смысл переносить старые проекты на вит (наслышан о проблеме с env переменными). Спасибо за видео!
Я не Ayub, но тоже отвечу. Использовать стоит. Он в дев очень быстрый из-за того, что под капотом esbuild. А в проде хорошие дефолтные настройки, которые сильно менять не нужно.
С переменными проблема да.
В next'е использовать vite спорно как по мне. Они свой же сборщик делают и явно на него все силы будут брошены.
Стоит ли переносить старые проекты? Ну смотря насколько они большие. Если малые средние, то больше дня не займёт по идее. Большие наверное не стоит. Особенно если надо переводить и просто сборку, и сторибук, и много плагинов
@@baileysli6235 а что за проблема с переменными, я его использую в проекте.
@@baileysli6235 Да, некст пилят свой сборщик, но он сейчас в альфе и двигается не особо быстро.
У нас проект на нексте, и он порядка нескольких секунд билдится между изменениями. становится очень тяжело (
@@Максим-д1у4щ недавно вышел апдейт, уже бета
@@rustamakhmetyanov4404 что к переменным из .env нужно обращаться не из процесса, а по import.meta как в видео. И по дефолту нужен префикс VITE_
🎉
А самое интересное, что если вешать outside листенер не на document, а например на document.getElementById("root"), то все будет работать как надо и без stopPropagation. Думаю тут дело не во всплытии, а в том, что реакт сам эмулирует механизм всплытия для "своих" элементов (при чем микротасками), и только после этого эмитит событие выше по "нативному" дому (макротаской).
Да, ты прав. Если навесить обработчик на рут - то все будет работать, как нужно.
Однако то, как ты описываешь работу ивентов в реакт - не совсем верно. У самого реакта в целом нету механизма всплытия. Он навешивает 1 обработчик на root, затем уже по target'у определяет какие хендлеры из компонентов надо вызвать.
Причем если обработчик висит на дочернем и родительском элементе - то они будут вызываться снизу вверх синхронно. То есть асинхронного всплытия у синтетических ивентов нету.
Ну и в целом, нельзя взять, остановить ивенты на руте. И затем эмитить их дальше макротаской. Вообще все ивенты который ты эмитишь сам программно не будут асинхронными. У них будет стоять флаг isTrusted - false, и уже обработчики все будут вызываться синхронно.
Пытался воспроизвести такое поведение на очень похожем примере, но у меня повторный клик не срабатывает. Все логи срабатывают в такой же последовательности, но второго outside click не происходит. Единственное отличие - стейт хранится в редаксе (вместо setOpened вызывается dispatch).
Не все верно, мой косяк, событие было не на click а mousedown, так что воспроизводится.
Главное, что понял проблему!
алилуя, свершилось, хоть до одного блогера дошло что сет.функция отрабатывает синхронно...
Гений с помощью какого функционала в JS она могла бы быть асинхронной
Что значит «дошло»? Я разве говорил, что это не так?)
@@ayub_begimkulov твое видео про батчинг в реакте, 36 сек
Только почему то в гугле все статьи говорят о том что сет стейт асинхронный...
@@pavelnedved1901 setState классовых компонентов не тоже самое что сет функция useState, которая под копотом называется диспач и работает совершенно подругому
Кстати тоже была такая же проблема. Не с твоим хуком, а самописным. Но я не помню как решил. Помню только что пару часиков дебажить пришлось
Главное, что отдебажил!
то есть в момент пока событие click происходит по button, успевает навешиваться хэндлер на document и на нем тоже начинает отрабатывать событие click?, немного не понял этот момент
Прочитай про всплытие событий js
@@Туран141 не понимаю к чему этот комментарий), если событие навешивается после клика, мда)) почитай лучше внимательней что я спросил
@@yevgeniy-ten3482
ок)
Нет, js однопоточный, такого не может быть. Событие происходит на button, однако оно не сразу доходит до документа (тут человек правильно наводку дал на всплытие).
Из-за приоритетности микротасок обновление компонента происходит раньше, поэтому к тому моменту когда ивент "всплывет" до документа, там уже будет навешен outside click обработчик.
Получается у нас флоу такой:
1) Ивент на кнопке
2) Обновление React
3) Всплытие ивента до родительских элементов
@@ayub_begimkulov Ему бы сперва про софт скилы прочитать, думаю софт скилл приоритетнее чем всплытие событий.
Я думаю, что рано или поздно, старый способ рендера реакта в root вообще выпилят. Нет смысла держать несколько методов рендера
Это да, конечно. Сейчас просто для лучшей совместимости с прошлыми версиями его не убрали.
Подскажите пжл: этот уровень знания какому уровню программиста должен соответствовать ? Я только 4й месяц изучаю и только пока основы ( синтаксис, html и css) и до библиотек\технологий не дошел но при просмотре видео как будто человек на арабском разговаривает. Звуки знакомые , пару слов даже вроде уже знаю но 99% не понятно.
примерно миддл/миддл+, правда практическое применение данных кейсов сказать не могу
@@malinovayagalya4635чел, какой мидл. Это уровень крепкого синьера
Ну слава яйцам, а то я думал это джун должен знать на отлично даже если ночью разбудить.
@@АлександрКазаков-р3е конкуренция на рынке джунов передает привет
@@Alex-ov9eo да знаю я ....знаю ( грустный плачь под столом обняв коленки руками)