Ухтышка! Очень и очень!!! Вот про useLayoutEffect() я вообще нигде не встречал в русскоязычном сегменте. А тут ещё и сопоставление с обычным useEffect() и componentDidMount(). Конечно, без этого материал был бы не расскрыт, но вы раскрыли его) Спасибо! Успеха!
Занятно, проверил, в react 17.0.2 синхронный sleep не фризит render, сначала отрабатывает setState, затем после фриза остальная часть componentDidMount
@@it-sin9k чем я вчера смотрел хз, синхронный sleep конечно фризит, мне вот не понятно как так выходит что рендерится сразу результат setState(тот что в componentDidMount, при наличии sleep перед setState). Судя по логам повторный рендер происходит после sleep, а на экране тем временем уже результат «повторного» рендеринга.
Спасибо!) Я проводил голосовалку, какую тему после React hooks раскрыть. И там как раз таки была тема Redux, но люди выбрали тему Паттерны) Поэтому учавствуйте в будущих голосовалках)
Спасибо за материал! Как я только не пробовал через useEffect и useLayoutEffect и у меня всё ровно dispatch(createAsyncThunk...) } , [ ] ) дважды подгружает данные... Я надеюсь Вы знакомы с подобной ситуацией и можете подсказать, почему так происходит у меня)
Объясните плиз, может я что-то неправильно понимаю. Вызов setState в componentDidMount асинхронный, поэтому у браузера есть возможность отрисовать 0, но мы почему-то сразу видим 220 без каких-либо мерцаний. У меня есть подозрения, что setState - это микрозадача, поэтому пока состояние не обновится, до нового кадра браузера дело не доходит.
Если бы это была бы микрозадача мы бы никогда не увидели бы ноль с синхронным кодом в ней. Думаю тут надо смотреть на то как написан React, а не на event loop. Я думаю если просто написать в componentDidMount setState, то react просто успеваю за 1 frame нарисовать render, после этого изменить state и опять провести render. В этом же и суть виртуального дома, что он может обновиться много раз, а отрисовать лишь 1 раз. Опять же, это просто гипотеза, а не точный факт :)
@@it-sin9k записал работу примера из видео в Chrome Dev Tools и немного удивился) Вызов setState из componentDidMount просто вносит изменения в переменные реакта и возвращает управление методу жизненного цикла. При этом вся цепочка действий (первый рендер -> обновление DOM -> componentDidMount -> setState -> повторный рендер -> повторное обновление DOM) выполняется внутри одной макрозадачи. Так что кадру с "0" попросту некуда вклиниться. Запутало то, что setState считается асинхронным, поэтому ошибочно думал, что второй рендер будет выполняться в отдельной макрозадаче)
Так будет более короткый. * * * function Exmaple2() { const [status, setStatus] = useState("========= NOT SET ========="); useLayoutEffect(() => { setStatus("INITIALIZED"); }, []); return {status}; }
Получается useEffect делает setTimeout колбека после того как react вызывает компонент чтобы получить разметку, а componentDidMount вызывается синхронно после метода render в самой первой макро таске и блокирует стек вызова и пока стек не будет свободен не выполниться перерисовка, я так понял. Странно почему componentDidMount по умолчанию не сделали планирующим макро таску в таком случае?)
я думаю когда создавали React о таком сходу не подумали, были и похуже проблемы и поинтереснее идеи чем заняться. А появилась возможность во время хуков сделать это иначе и вот запилили)
на фрикодкэмп курс реакта прохожу, там в задании не обьяснили, загуглил, в ютубе посмотрел, у тебя понятней всех, тема простая, но не понятно, если тебе просто дают что-то в программировании, без обьяснений, расшифровки
Круто что ты такие достаточно глубокие темы поднимаешь по react
Спасибо!)
Спасибо, отличный контент. Орлов молодец, будьте как Орлов)
возьмем как девиз канала))) "Орлов молодец, будьте как Орлов!"
Огромное спасибо за разъяснение!
Спасибо, что уделяешь в своих роликах таким неочевидным, но очень важным нюансам!
Спасибо за приятный комментарий :)
Спасибо за Ваши видео. Как всегда, очень подробно и доходчиво!
Невероятно качественный контент! Это подписка и фура лайков!
Годится!)
Ухтышка! Очень и очень!!! Вот про useLayoutEffect() я вообще нигде не встречал в русскоязычном сегменте. А тут ещё и сопоставление с обычным useEffect() и componentDidMount(). Конечно, без этого материал был бы не расскрыт, но вы раскрыли его) Спасибо! Успеха!
Это очень круто!)
но я еще рекомендую посмотреть плейлист Frontend Solid, судя по опросам он более успешный чем React плейлист))
если не сикрет, а где вы наткнулись на наш канал? а то сегодня большой прирост, а мы не знаем откуда ноги растут)
@@it-sin9k Была ссылка с канала It kamasutra, от Димыча.
Супер, спасибо)
Я начинающий разработчик, и такие видео, поясняющие тонкие моменты, очень для меня кстати)
Подача, монтаж просто класс.
Спасибо!)
Спасибо ребята. Отдельный респект за простой и эффективный sleep().
Всегда приятно читать такие комментарии)
Спасибо за ролик. Пример с квадратом очень наглядный и понятный
Отличное видео, после прочтения документации ваше видео помогло разобраться до конца в теме, благодаря наглядному примеру. Лайк и подписочка!
Добро пожаловать :)
Очень интересно,спасибо ! useLayoutEffect, componentDidMount и useEffect
Спасибо!
спасибо за поддержку!
Спасибо)
Поддержу лайком и комментом
лайк для нас на вес золота!)
Красавчик, все ясно и очень полезно оказалось
спасибо тебе!
Помогло, спс большое тебе, дружище ))
Спасибо за пояснение, очень познавательно.
Это действительно годный контент!!
Просто супер, спасибо
Канал топчик.Я доволен :)
рады стараться :)
Как всегда топ 🔥🔥
Классная обработка видео, все четко и понятно. Спасибо за труд, подписался!
мы очень рады :)
спасибо
Занятно, проверил, в react 17.0.2 синхронный sleep не фризит render, сначала отрабатывает setState, затем после фриза остальная часть componentDidMount
а где устанавливали sleep?
@@it-sin9k В componentDidMount
@@it-sin9k чем я вчера смотрел хз, синхронный sleep конечно фризит, мне вот не понятно как так выходит что рендерится сразу результат setState(тот что в componentDidMount, при наличии sleep перед setState). Судя по логам повторный рендер происходит после sleep, а на экране тем временем уже результат «повторного» рендеринга.
Вопрос хороший. Но нужно иметь весь код перед глазами, чтобы понять, что к чему :(
@@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 а сразу актуальная ширина на клиенте
спасибо, как всегда, супер.
Благодарочка :)
Хочется узнать планируется ли контент на тему Concurent. Тема, дейтвительно,
не тривиальная
Есть мысли сделать видео по этому поводу, но не в ближайшее время. Ближайшие выпусков 5 уже распланированы
Контент, как всегда, шикарен! Подскажи, планируешь ли записывать что-то подобное про, например, по Flux? Интересно было бы про Редакс послушать
Спасибо!)
Я проводил голосовалку, какую тему после React hooks раскрыть. И там как раз таки была тема Redux, но люди выбрали тему Паттерны) Поэтому учавствуйте в будущих голосовалках)
@@it-sin9k я только недавно открыл для себя этот канал) на голосовалки не успел. Но паттерны - это не хуже ни разу))
Вместо componentDidCatch можно использовать useErrorBoundary
Спасибо за материал! Как я только не пробовал через useEffect и useLayoutEffect и у меня всё ровно dispatch(createAsyncThunk...) } , [ ] ) дважды подгружает данные... Я надеюсь Вы знакомы с подобной ситуацией и можете подсказать, почему так происходит у меня)
мне бы код увидеть, причины могут быть разными :)
Отличная работа
Спасибо!
спасибо, очень полезно и наглядно
Объясните плиз, может я что-то неправильно понимаю. Вызов setState в componentDidMount асинхронный, поэтому у браузера есть возможность отрисовать 0, но мы почему-то сразу видим 220 без каких-либо мерцаний. У меня есть подозрения, что setState - это микрозадача, поэтому пока состояние не обновится, до нового кадра браузера дело не доходит.
Если бы это была бы микрозадача мы бы никогда не увидели бы ноль с синхронным кодом в ней. Думаю тут надо смотреть на то как написан React, а не на event loop. Я думаю если просто написать в componentDidMount setState, то react просто успеваю за 1 frame нарисовать render, после этого изменить state и опять провести render. В этом же и суть виртуального дома, что он может обновиться много раз, а отрисовать лишь 1 раз. Опять же, это просто гипотеза, а не точный факт :)
@@it-sin9k записал работу примера из видео в Chrome Dev Tools и немного удивился) Вызов setState из componentDidMount просто вносит изменения в переменные реакта и возвращает управление методу жизненного цикла. При этом вся цепочка действий (первый рендер -> обновление DOM -> componentDidMount -> setState -> повторный рендер -> повторное обновление DOM) выполняется внутри одной макрозадачи. Так что кадру с "0" попросту некуда вклиниться.
Запутало то, что setState считается асинхронным, поэтому ошибочно думал, что второй рендер будет выполняться в отдельной макрозадаче)
@@dmtrkskv Звучит как неплохое исследование) если будет желание поисследовать что то еще любопытное, можно ролик про это записать и выложить у нас)
Кайф-кайф-кайф!
ретЁрн)))
спасибо за видео!
Вау класс просто
Так будет более короткый.
* * *
function Exmaple2() {
const [status, setStatus] = useState("========= NOT SET =========");
useLayoutEffect(() => {
setStatus("INITIALIZED");
}, []);
return {status};
}
Годно
Получается useEffect делает setTimeout колбека после того как react вызывает компонент чтобы получить разметку, а componentDidMount вызывается синхронно после метода render в самой первой макро таске и блокирует стек вызова и пока стек не будет свободен не выполниться перерисовка, я так понял.
Странно почему componentDidMount по умолчанию не сделали планирующим макро таску в таком случае?)
я думаю когда создавали React о таком сходу не подумали, были и похуже проблемы и поинтереснее идеи чем заняться. А появилась возможность во время хуков сделать это иначе и вот запилили)
Т.е грубо говоря useEffect вызывает асинхронно синхронное изменение стейта, чтобы отображать промежуточные варики
А кто больше комиссии заберет? ютуб спонсорство или патреон?
хмм, хороший вопрос. Комиссию больше берет патреон :)
тема с красными квадратами взята из статьи на хабре про аналогичную тему, или же наоборот
Я иногда публикую расшифровки своих же видео на хабре. Поэтому в обоих случаях я постил контент :)
на фрикодкэмп курс реакта прохожу, там в задании не обьяснили, загуглил, в ютубе посмотрел, у тебя понятней всех, тема простая, но не понятно, если тебе просто дают что-то в программировании, без обьяснений, расшифровки
Спасибо за такую высокую похвалу!
Не удалось воспроизвести ваш пример на 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
в 18 версии реакта ввели батчинг, соответственно код стал работать иначе. Теперь нужно использовать flushSync
useLayoutEffect, componentDidMountб useEffect
только что на хабре это читал - один в один
Так это наверное наша же статья) некоторые видео я делал расшифровку на хабре)
Исчерпывающе. Нечего добавить или убавить. Упоминание документации уже после примера, а не до, хорошо сказалось на закреплении того о чем идет речь.
Спасибо!) мы работаем над подачей)
Запрещают материться в интернете, а так бы высказался по эмоциональнее про хорошее качество данного ролика
ахахах) низкий поклон)
в качестве благодарности, можно поделиться этими видео с коллегами)
дыд маунт
а что не так с дыд маунт?) а то с комента непонятно)
@@it-sin9k местами слишком сильное Ы, режет слух
Очень полезная инфа, спасибо!
Спасибо!