какая разница между useLayoutEffect, componentDidMount и useEffect?
Вставка
- Опубліковано 11 лип 2024
- Мы плавно переписываем компоненты с componentDidMount на useEffect, но на 100 ли процентов они идентичны? Данное видео поможет Вам в этом разобраться!
Поддержать Айти Синяка можно здесь:
UA-cam: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
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-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Круто что ты такие достаточно глубокие темы поднимаешь по react
Спасибо!)
Спасибо за Ваши видео. Как всегда, очень подробно и доходчиво!
Спасибо за ролик. Пример с квадратом очень наглядный и понятный
Красавчик, все ясно и очень полезно оказалось
Спасибо, отличный контент. Орлов молодец, будьте как Орлов)
возьмем как девиз канала))) "Орлов молодец, будьте как Орлов!"
Просто супер, спасибо
Как всегда топ 🔥🔥
Очень интересно,спасибо ! useLayoutEffect, componentDidMount и useEffect
Спасибо за пояснение, очень познавательно.
Это действительно годный контент!!
Спасибо, что уделяешь в своих роликах таким неочевидным, но очень важным нюансам!
Спасибо за приятный комментарий :)
спасибо, очень полезно и наглядно
Классная обработка видео, все четко и понятно. Спасибо за труд, подписался!
мы очень рады :)
Помогло, спс большое тебе, дружище ))
Отличное видео, после прочтения документации ваше видео помогло разобраться до конца в теме, благодаря наглядному примеру. Лайк и подписочка!
Добро пожаловать :)
Очень полезная инфа, спасибо!
Спасибо!
Ухтышка! Очень и очень!!! Вот про useLayoutEffect() я вообще нигде не встречал в русскоязычном сегменте. А тут ещё и сопоставление с обычным useEffect() и componentDidMount(). Конечно, без этого материал был бы не расскрыт, но вы раскрыли его) Спасибо! Успеха!
Это очень круто!)
но я еще рекомендую посмотреть плейлист Frontend Solid, судя по опросам он более успешный чем React плейлист))
если не сикрет, а где вы наткнулись на наш канал? а то сегодня большой прирост, а мы не знаем откуда ноги растут)
@@it-sin9k Была ссылка с канала It kamasutra, от Димыча.
спасибо, как всегда, супер.
Благодарочка :)
спасибо тебе!
Супер, спасибо)
Я начинающий разработчик, и такие видео, поясняющие тонкие моменты, очень для меня кстати)
Подача, монтаж просто класс.
Спасибо!)
Невероятно качественный контент! Это подписка и фура лайков!
Годится!)
Спасибо)
Поддержу лайком и комментом
лайк для нас на вес золота!)
Спасибо!
спасибо за поддержку!
Канал топчик.Я доволен :)
рады стараться :)
Спасибо ребята. Отдельный респект за простой и эффективный sleep().
Всегда приятно читать такие комментарии)
спасибо
Отличная работа
Спасибо!
Вау класс просто
ретЁрн)))
спасибо за видео!
Годно
Кайф-кайф-кайф!
Контент, как всегда, шикарен! Подскажи, планируешь ли записывать что-то подобное про, например, по Flux? Интересно было бы про Редакс послушать
Спасибо!)
Я проводил голосовалку, какую тему после React hooks раскрыть. И там как раз таки была тема Redux, но люди выбрали тему Паттерны) Поэтому учавствуйте в будущих голосовалках)
@@it-sin9k я только недавно открыл для себя этот канал) на голосовалки не успел. Но паттерны - это не хуже ни разу))
Хочется узнать планируется ли контент на тему Concurent. Тема, дейтвительно,
не тривиальная
Есть мысли сделать видео по этому поводу, но не в ближайшее время. Ближайшие выпусков 5 уже распланированы
Спасибо за материал! Как я только не пробовал через useEffect и useLayoutEffect и у меня всё ровно dispatch(createAsyncThunk...) } , [ ] ) дважды подгружает данные... Я надеюсь Вы знакомы с подобной ситуацией и можете подсказать, почему так происходит у меня)
мне бы код увидеть, причины могут быть разными :)
Занятно, проверил, в 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 а сразу актуальная ширина на клиенте
Объясните плиз, может я что-то неправильно понимаю. Вызов 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 Звучит как неплохое исследование) если будет желание поисследовать что то еще любопытное, можно ролик про это записать и выложить у нас)
Вместо componentDidCatch можно использовать useErrorBoundary
Получается useEffect делает setTimeout колбека после того как react вызывает компонент чтобы получить разметку, а componentDidMount вызывается синхронно после метода render в самой первой макро таске и блокирует стек вызова и пока стек не будет свободен не выполниться перерисовка, я так понял.
Странно почему componentDidMount по умолчанию не сделали планирующим макро таску в таком случае?)
я думаю когда создавали React о таком сходу не подумали, были и похуже проблемы и поинтереснее идеи чем заняться. А появилась возможность во время хуков сделать это иначе и вот запилили)
Т.е грубо говоря useEffect вызывает асинхронно синхронное изменение стейта, чтобы отображать промежуточные варики
Так будет более короткый.
* * *
function Exmaple2() {
const [status, setStatus] = useState("========= NOT SET =========");
useLayoutEffect(() => {
setStatus("INITIALIZED");
}, []);
return {status};
}
А кто больше комиссии заберет? ютуб спонсорство или патреон?
хмм, хороший вопрос. Комиссию больше берет патреон :)
тема с красными квадратами взята из статьи на хабре про аналогичную тему, или же наоборот
Я иногда публикую расшифровки своих же видео на хабре. Поэтому в обоих случаях я постил контент :)
useLayoutEffect, componentDidMountб 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
на фрикодкэмп курс реакта прохожу, там в задании не обьяснили, загуглил, в ютубе посмотрел, у тебя понятней всех, тема простая, но не понятно, если тебе просто дают что-то в программировании, без обьяснений, расшифровки
Спасибо за такую высокую похвалу!
только что на хабре это читал - один в один
Так это наверное наша же статья) некоторые видео я делал расшифровку на хабре)
Исчерпывающе. Нечего добавить или убавить. Упоминание документации уже после примера, а не до, хорошо сказалось на закреплении того о чем идет речь.
Спасибо!) мы работаем над подачей)
Запрещают материться в интернете, а так бы высказался по эмоциональнее про хорошее качество данного ролика
ахахах) низкий поклон)
в качестве благодарности, можно поделиться этими видео с коллегами)
дыд маунт
а что не так с дыд маунт?) а то с комента непонятно)
@@it-sin9k местами слишком сильное Ы, режет слух