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

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

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

[@it-sin9k]

Спасибо!)

[@eugenetit8072]

Огромное спасибо за разъяснение!

[@underpog5347]

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

[@it-sin9k]

возьмем как девиз канала))) "Орлов молодец, будьте как Орлов!"

[@ivanp7697]

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

[@it-sin9k]

Спасибо за приятный комментарий :)

[@kri4evskiy]

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

[@it-sin9k]

Это очень круто!) но я еще рекомендую посмотреть плейлист Frontend Solid, судя по опросам он более успешный чем React плейлист))

[@it-sin9k]

если не сикрет, а где вы наткнулись на наш канал? а то сегодня большой прирост, а мы не знаем откуда ноги растут)

[@АлексейЛоскутников-ю4р]

@@it-sin9k Была ссылка с канала It kamasutra, от Димыча.

[@artemu78]

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

[@it-sin9k]

Всегда приятно читать такие комментарии)

[@pashastrayt8928]

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

[@it-sin9k]

Спасибо!)

[@artemu78]

Спасибо!

[@it-sin9k]

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

[@zooyotz]

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

[@it-sin9k]

Годится!)

[@DmitriLipski]

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

[@lollolich2399]

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

[@it-sin9k]

Добро пожаловать :)

[@mtyEyes]

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

[@VeaceslavBARBARII]

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

[@mikhailstepanischev8316]

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

[@awakeupcall5336]

спасибо

[@denisafonkin8795]

спасибо тебе!

[@IIIHANDYMANIII]

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

[@it-sin9k]

а где устанавливали sleep?

[@IIIHANDYMANIII]

@@it-sin9k В componentDidMount

[@IIIHANDYMANIII]

@@it-sin9k чем я вчера смотрел хз, синхронный sleep конечно фризит, мне вот не понятно как так выходит что рендерится сразу результат setState(тот что в componentDidMount, при наличии sleep перед setState). Судя по логам повторный рендер происходит после sleep, а на экране тем временем уже результат «повторного» рендеринга.

[@it-sin9k]

Вопрос хороший. Но нужно иметь весь код перед глазами, чтобы понять, что к чему :(

[@pkhorikov]

@@it-sin9k у меня аналогичное поведение на react@18.0.0. import React, { useState, useEffect, useRef } from "react"; export const RedFigureFc: React.FC = (): JSX.Element => { const [width, setWidth] = useState(0); const ref: React.RefObject = useRef(); useEffect(() => { const start = new Date().getTime(); let end = start; while (end < start + 3 * 1000) { end = new Date().getTime(); } setWidth(ref.current.clientWidth); }, []); return ( width: { width } ); } width не 0 а сразу актуальная ширина на клиенте

[@-X-Ray-]

Кайф-кайф-кайф!

[@hihoho1578]

Спасибо) Поддержу лайком и комментом

[@it-sin9k]

лайк для нас на вес золота!)

[@userJakov]

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

[@it-sin9k]

Я иногда публикую расшифровки своих же видео на хабре. Поэтому в обоих случаях я постил контент :)

[@kostyakozlov5289]

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

[@it-sin9k]

Есть мысли сделать видео по этому поводу, но не в ближайшее время. Ближайшие выпусков 5 уже распланированы

[@gritsienkooleg3447]

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

[@NoName-zh7cc]

Просто супер, спасибо

[@hamletmuradyan5692]

Так будет более короткый. * * * function Exmaple2() { const [status, setStatus] = useState("========= NOT SET ========="); useLayoutEffect(() => { setStatus("INITIALIZED"); }, []); return {status}; }

[@sdv7525]

А кто больше комиссии заберет? ютуб спонсорство или патреон?

[@it-sin9k]

хмм, хороший вопрос. Комиссию больше берет патреон :)

[@LodkaGG]

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

[@kostyapolishko6282]

Это действительно годный контент!!

[@sykalovandrey6090]

Спасибо за материал! Как я только не пробовал через useEffect и useLayoutEffect и у меня всё ровно dispatch(createAsyncThunk...) } , [ ] ) дважды подгружает данные... Я надеюсь Вы знакомы с подобной ситуацией и можете подсказать, почему так происходит у меня)

[@it-sin9k]

мне бы код увидеть, причины могут быть разными :)

[@aleksandrmikhailov3255]

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

[@it-sin9k]

Спасибо!) Я проводил голосовалку, какую тему после React hooks раскрыть. И там как раз таки была тема Redux, но люди выбрали тему Паттерны) Поэтому учавствуйте в будущих голосовалках)

[@aleksandrmikhailov3255]

@@it-sin9k я только недавно открыл для себя этот канал) на голосовалки не успел. Но паттерны - это не хуже ни разу))

[@michaelwhyte1021]

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

[@it-sin9k]

мы очень рады :)

[@vadymserdiuk2779]

Отличная работа

[@it-sin9k]

Спасибо!

[@bekabdimanas]

Вау класс просто

[@raufhashimov241]

Канал топчик.Я доволен :)

[@it-sin9k]

рады стараться :)

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

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

[@it-sin9k]

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

[@wh1teb1ack92]

Т.е грубо говоря useEffect вызывает асинхронно синхронное изменение стейта, чтобы отображать промежуточные варики

[@serhiirumiantsev7736]

спасибо, как всегда, супер.

[@it-sin9k]

Благодарочка :)

[@dmtrkskv]

Объясните плиз, может я что-то неправильно понимаю. Вызов setState в componentDidMount асинхронный, поэтому у браузера есть возможность отрисовать 0, но мы почему-то сразу видим 220 без каких-либо мерцаний. У меня есть подозрения, что setState - это микрозадача, поэтому пока состояние не обновится, до нового кадра браузера дело не доходит.

[@it-sin9k]

Если бы это была бы микрозадача мы бы никогда не увидели бы ноль с синхронным кодом в ней. Думаю тут надо смотреть на то как написан React, а не на event loop. Я думаю если просто написать в componentDidMount setState, то react просто успеваю за 1 frame нарисовать render, после этого изменить state и опять провести render. В этом же и суть виртуального дома, что он может обновиться много раз, а отрисовать лишь 1 раз. Опять же, это просто гипотеза, а не точный факт :)

[@dmtrkskv]

​@@it-sin9k записал работу примера из видео в Chrome Dev Tools и немного удивился) Вызов setState из componentDidMount просто вносит изменения в переменные реакта и возвращает управление методу жизненного цикла. При этом вся цепочка действий (первый рендер -> обновление DOM -> componentDidMount -> setState -> повторный рендер -> повторное обновление DOM) выполняется внутри одной макрозадачи. Так что кадру с "0" попросту некуда вклиниться. Запутало то, что setState считается асинхронным, поэтому ошибочно думал, что второй рендер будет выполняться в отдельной макрозадаче)

[@it-sin9k]

@@dmtrkskv Звучит как неплохое исследование) если будет желание поисследовать что то еще любопытное, можно ролик про это записать и выложить у нас)

[@НикитаГончаров-е8ш]

Как всегда топ 🔥🔥

[@makeoverweb2663]

Очень полезная инфа, спасибо!

[@it-sin9k]

Спасибо!

[@alexandrchazov6185]

useLayoutEffect, componentDidMountб useEffect

[@vitabramov89]

ретЁрн))) спасибо за видео!

[@koshgosh3081]

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

[@it-sin9k]

Спасибо за такую высокую похвалу!

[@Aleksandr-w4e]

спасибо, очень полезно и наглядно

[@pkhorikov]

Не удалось воспроизвести ваш пример на React 18.0.0. export const RedFigureFc: React.FC = (): JSX.Element => { const [width, setWidth] = useState(0); const ref: React.RefObject = useRef(); useEffect(() => { const start = new Date().getTime(); let end = start; while (end < start + 3 * 1000) { end = new Date().getTime(); } setWidth(ref.current.clientWidth); }, []); return ( width: { width } ); } у меня с первого рендера width = ref.current.clientWidth, а не 0 как в useState

[@it-sin9k]

в 18 версии реакта ввели батчинг, соответственно код стал работать иначе. Теперь нужно использовать flushSync

[@IMHolub]

Годно

[@lomeat]

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

[@it-sin9k]

Спасибо!) мы работаем над подачей)

[@artemtreiko8436]

только что на хабре это читал - один в один

[@it-sin9k]

Так это наверное наша же статья) некоторые видео я делал расшифровку на хабре)

[@_Black_Mirror_]

Запрещают материться в интернете, а так бы высказался по эмоциональнее про хорошее качество данного ролика

[@it-sin9k]

ахахах) низкий поклон) в качестве благодарности, можно поделиться этими видео с коллегами)

[@djohardudaev95]

дыд маунт

[@it-sin9k]

а что не так с дыд маунт?) а то с комента непонятно)

[@djohardudaev95]

@@it-sin9k местами слишком сильное Ы, режет слух

[@ashbarso7752]

Красавчик, все ясно и очень полезно оказалось