какая разница между useLayoutEffect, componentDidMount и useEffect?

Мы плавно переписываем компоненты с componentDidMount на useEffect, но на 100 ли процентов они идентичны? Данное видео поможет Вам в этом разобраться!

Поддержать Айти Синяка можно здесь:

00:00 Анонс темы
00:33 Викторина с componentDidMount
01:38 Правильный ответ
01:49 Проверим со sleep
02:37 Делаем выводы о componentDidMount
03:15 Сравним с useEffect
04:01 Делаем выводы о useEffect
04:31 Подтверждение из документации
05:12 Аналога useEffect не существует на классах
05:37 Знакомство с useLayoutEffect
05:54 Задумайтесь...
06:19 Подписывайтесь!
06:53 Рекомендованные видео

-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

[ВладиславПузырев-юл]

Круто что ты такие достаточно глубокие темы поднимаешь по react

[zooyotz]

Невероятно качественный контент! Это подписка и фура лайков!

[underpog]

Спасибо, отличный контент. Орлов молодец, будьте как Орлов)

[krievskiy]

Ухтышка! Очень и очень!!! Вот про useLayoutEffect() я вообще нигде не встречал в русскоязычном сегменте. А тут ещё и сопоставление с обычным useEffect() и componentDidMount(). Конечно, без этого материал был бы не расскрыт, но вы раскрыли его) Спасибо! Успеха!

[artemu]

Спасибо ребята. Отдельный респект за простой и эффективный sleep().

[ivanp]

Спасибо, что уделяешь в своих роликах таким неочевидным, но очень важным нюансам!

[pashastrayt]

Супер, спасибо)
Я начинающий разработчик, и такие видео, поясняющие тонкие моменты, очень для меня кстати)
Подача, монтаж просто класс.

[DmitriLipski]

Спасибо за Ваши видео. Как всегда, очень подробно и доходчиво!

[lollolich]

Отличное видео, после прочтения документации ваше видео помогло разобраться до конца в теме, благодаря наглядному примеру. Лайк и подписочка!

[mtyEyes]

Спасибо за ролик. Пример с квадратом очень наглядный и понятный

[mikhailstepanischev]

Очень интересно, спасибо ! useLayoutEffect, componentDidMount и useEffect

[IIIHANDYMANIII]

Занятно, проверил, в react 17.0.2 синхронный sleep не фризит render, сначала отрабатывает setState, затем после фриза остальная часть componentDidMount

[LodkaGG]

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

[gritsienkooleg]

Помогло, спс большое тебе, дружище ))

[aleksandrmikhailov]

Контент, как всегда, шикарен! Подскажи, планируешь ли записывать что-то подобное про, например, по Flux? Интересно было бы про Редакс послушать

[michaelwhyte]

Классная обработка видео, все четко и понятно. Спасибо за труд, подписался!

[ВладиславПузырев-юл]

Получается useEffect делает setTimeout колбека после того как react вызывает компонент чтобы получить разметку, а componentDidMount вызывается синхронно после метода render в самой первой макро таске и блокирует стек вызова и пока стек не будет свободен не выполниться перерисовка, я так понял.

Странно почему componentDidMount по умолчанию не сделали планирующим макро таску в таком случае?)

[kostyakozlov]

Хочется узнать планируется ли контент на тему Concurent. Тема, дейтвительно,
не тривиальная

[VeaceslavBARBARII]

Вместо componentDidCatch можно использовать useErrorBoundary

[userJakov]

тема с красными квадратами взята из статьи на хабре про аналогичную тему, или же наоборот