Відео

Это нужно для того, чтобы объект не создавался с нуля при каждом рендере. Тело функционального компонента это фактически рендер-функция. Если не использовать хук useMemo, то объект contextValue будет каждый раз новым. В нашем случае это не очень и нужно, т.к. в все переменные стеейта попадают в контекст, но в реальных проектах это обычно не так. Есть другие переменные, колбэки и т.д., которые меняют стейт, но в контекст не попадают. Да, во второй версии контекста обновление происходит по другому принципу, но лучше следовать одному и тому же подходу и не надеяться на то, что где-то в другом месте программы все будет обработано правильно. Почему? Даже в самом простом проекте лучше сразу с самого начала думать о том, что он должен быть "френдли" к командной работе. Что это означает рассказывать долго. Если кратко - разработчик должен хорошо понимать код, даже если не он его написал. Когда мы смотрим на этот компонент - видим, value меморизировано значит, что бы ни происходило в дочерних компонентах, этот компонент не будет аффектить лишние ре-рендеры. И чтобы это понять не нужно изучать все компоненты связанные с контекстом, это видно сразу в одном месте. Опять же, если заметили, компонент App мы вообще не трогали, поменяли только модуль контекста. В начальной версии useMemo обязательно. Не нужно бояться лишней меморизации, хуже точно не будет.

а что не так, разрешите поинтересоваться?

@EasyITChannel есть спецификация html5 и вней раздел про ивент луп - попробуйте почитать

:) возможно Вы не поняли о чем этот ролик? Кроме "почитать" еще есть "понять прочитанное". В ролике речь идет о практическом понимании, о том как это работает на практике. Как это реализовано в "металле" ;) Будете с этим спорить? Что-то из изложенного, на самом деле не так и Вы можете это доказать практическим примером?

Спасибо за просмотр и обратную связь. Исходный код есть у почти всех видео на канале. Чтобы все буковки были видны четко и не расплывались рекомендую смотреть в 1080p, это значительно упростит разбор кода. У фоновой музыки есть важная причина. Вряд ли Вам будет комфортно слушать как в фоне воет воздушная тревога, проезжает трамвай, лают собаки, работает пылесос у соседей, скрипит кресло и т.д. А переозвучивать по 100 раз или часами чистить звук у меня, к сожалению, нет времени - работать надо. Поэтому простой Noise Gate и нейтральная фоновая музычка решают проблему.

@@EasyITChannel Приношу Вам свои извинения. Я сначала скачал весь плей лист, а потом смотрел в низком разрешении. К музыке постепенно привык. После просмотра ролика окончательно отказался от React и подписался на Ваш канал. Огромное Вам спасибо! Жаль, что «прикоснулся к прекрасному» с некоторым опозданием…

Спасибо за поддержку.

Тут зависит от того, что считать костылями. Есть "стандартный подход" работы с компонентами в реакт. "Данные в компонент через пропсы, из компонента - через колбэки". Это отлично работает в большинстве случаев. Но в сложных, и особенно в высоконагруженных приложениях такая схема работает не очень (запредельная сложность, лишние ре-рендеры, куча зависимстей), поэтому есть встроенные механизмы, упрощающие работу в сложных случаях. Это уже продвинутый уровень и он как-бы нарушает кажущуюся простоту и логичность ;) Но так в любом фреймворке. В документации всегда демонстрируют примитивный пример и говорят - во как у нас всё легко и просто. Потом с ростом приложения часто упираются в тупик и начинают городить костыли. Причем, тупик этот появляется тем быстрее, чем меньше опыта работы с фреймворком, чем хуже понимаешь его сильные и слабые стороны.

Ну, я знаю как правильно, но есть грешок - часто тоже говорю как у нас принято, а не как правильно. Вероятно, потому что когда голосом среди своих обсуждаем, то привыкаешь к сложившейся терминологии. Когда работаешь в англоязычной среде, то это выравнивает в другую сторону, хотя там тоже есть свои нюансы, даже нэтивы не всё называют/произносят идентично.

А зачем их искать в бандле? Бандл загружен, шрифты подключены, загружены, им назначено имя. Нужно просто указывать шрифт в стилях в font-family по имени и всё.

@EasyITChannel Я подключил шрифты, у них путь допустим: ../../src/fonts/Arial.ttf В бандле потом они теряют свои пути, ну либо я что-то не так делаю

Вы правы, почти все видео делаю исходя из опыта в продакшн. Правда иногда это понятно только тем, кто тоже имеет подобный опыт ;)

Спасибо за просмотр.

Добрый день, очень сложно сказать что-то по поводу этого вопроса. В Git находится одна папка с одним набором файлов. В этом легко убедиться если зайти через веб-браузер по ссылке. Мне, если честно еще не доводилось увидеть двух одинаковых папок рядом, по моему скромному опыту операционные системы не допускают такого.

@EasyITChannel я имею ввиду папки проекта в вашем видео, но и в моем vs code тоже самое.

ах это :) Это среда разработки так отображает. Это одни и те же файлы, example1/EasyRunTracker это гит репозиторий, а та что в корне это проект Манки скрипта. Вот так отображается. Если открыть проект прямо из папки проекта, а не из корня репозитория то будет одна папка. Но это ерунда, не берите в голову.

И Вам спасибо за просмотр.

Спасибо за просмотр.

Спасибо на добром слове.

Большое спасибо за поддержку, стараюсь выкладывать полезное, в первую очередь, с практической точки зрения. И в максимально простом изложении. Не всегда получается, но цель такая есть.

Так бывает. Особенно когда и изначально четкого понимания не было, а были догадки навеянные знанием как это устроено в других языках. Более новое видео посмотрели?

Скорее всего связано с тем, что момента выпуска видео прошло уже порядочно времени и версии программ поменялись. Как дойдут руки - поправлю.

@Graymar112 Обновил репозиторий. Просто обновил пакеты до последних и установил type в package.json - для новой версии vite это обязательно. Должно работать.

Работы навалилось много. Нет времени на хобби ;)

Пожалуйста. Главное, чтобы польза была. Вам тоже спасибо за поддержку.

на канале

В тот момент когда я об этом говорю в правом верхнем углу появляется ссылка на видео. вот такая ua-cam.com/video/cVzwEowLe08/v-deo.html

Добавил.

Так а нет его. По крайней мере пока.

И Вам спасибо за просмотр. И поддержку.

Хорошо. Спасибо за просмотр.

И то верно ;)

@@EasyITChannel 😂

Спасибо за фидбэк:)

Спасибо за просмотр ;) Инфа хоть и кажется простой (не всем, конечно), но собранна и переработана не за один месяц/год. В первую очередь о практической ценности думаю, что мне было трудно добыть и что помогло.

Не верно. То что у тайм-аута с нулевой задержкой на самом деле есть реальная задержка в 4мс в данном случае не является причиной. Причина именно такой последовательности срабатывания обработчиков в том, что setTimout создает кроме задержки еще и макротаск. То есть сначала будет задержка на указанное время, а потом функция попадет в очередь макротасков и выполняется по обычным правилам event loop. «Проц» при этом нагружается абсолютно также, просто между отдельными макрозадачами происходит отрисовка интерфейса и пользователю кажется что нет подвисаний как если бы тоже самое делалось в while(true) цикле. Внимательно пересмотрите видео, Вы просто ничего не поняли. За деревьями не увидели леса.

@@EasyITChannel получается что отрисовка каждые 100 по счетчику, а не всё сразу. Это понятно. Но если бы не задержка на сеттаймаут, цикл прошёл бы очень быстро и всё бы зависло. Когда вы стали менять условия в цикле, в конце видео, зависания, доказывают это

Я про то что цикл проходит моментально, он не должен так долго считать

Дело не в этом. Чтобы понять в чем причина нужно просто понимать как работает эвент луп (данный ролик как раз об этом). Все довольно просто, не нужно ничего предполагать или придумывать. Например, счетчики. 1. выполняется один макротаск из очереди 2. выполняются обработчики ВСЕХ зарезолвленных микротасков 3. выполняется перерендер UI. 4. переход к пункту 1. Если макротаска нет (представьте, такое бывает), то вызывается обработчики зарезолвленных микротасков (промисов) и т.д. по кругу Сет таймаут с любой задержкой создает макротаск. Функция-обработчик это тело макротаска. Обработчик попадет в очередь после задержки, указанной для сетТаймаут. Пока висит таймаут с этой задачей ничего не происходит. Когда таймаут завершится функция попадет в очередь макротасков как отдельный макротаск. В нашем случае, если задать сетТаймаут 0, то эта функция попадет в очередь сразу и кроме того это гарантированно приведет к тому, что функция сработает ПОСЛЕ как минимум одного ререндера. Но если функция в сетТаймауте будет тяжелая, то на время ее выполнения все зависнет, т.к. это макротаск. Пока он работает к ререндеру JS перейти не может. Именно поэтому и висит, и разгрузка происходит не потому, что у таймаута маленькая задержка (или большая) а потому, что это новый макротаск. Улавливаете? Смысл совсем в другом, не в задержке. Сама по себе задержка ничем не поможет. Если просто завесить макротаск с помощью while(true), то и UI зависнет до его завершения.

@@EasyITChannel теперь понял, спасибо за очень подробное объяснение. Недавно провалил 2 собеседования, одно в вк, другое в уралсиб. Теперь вот изучаю всё, чтобы в следующий чтобы пройти. Про микро и макротаски спрашивали и там и там. В вк еще надо было полифил для Promise.all написать, то есть надо знать всё методы js, уметь написать самому. Ну и всё что на learnjavascript, надо знать, прям хорошо. Не считая regex конечно

Это очень смешное утверждение. Примерно как - надпись на заборе это не забор. Вам нужно для начала научиться слушать и понимать услышанное. При необходимости пересмотреть несколько раз, а уже потом высказывать умные мысли. Конечно, Вы легко сможете указать место, где автор сказал, что консоль лог это макротаск. :)

Спасибо за просмотр!

Спасибо за просмотр, приятно что есть польза.

Недавно познакомились с ChatGPT? Соглашусь, поначалу впечатляет.

@@EasyITChannel Я не знал ,что такое Wizard UI , думаю многие тоже не знают

Ну так это нормальный способ самообразования. Услышал незнакомое слово, остановил видео, нашел объяснение, изучил, пошел дальше. Это просто невозможно в одном видео дать объяснение всем используемым терминам. Вы не знаете что такое Wizard UI, кто-то не знает что такое переменная, еще кто-то не знает что такое телеграм. Не получается всё всегда объяснять полностью. Спасибо за Вашу активность и обратную связь.

Спасибо. Добавил.