Синяк, низкий тебе и помощникам поклон! Ооочень полезная информация. Ставлю 👍 и жду нового подробного контента😊. Многие кого я знаю, пользуются твоим открывающим подводные камни материалом
Вроде все из лучших побуждений, но все еще не хватает явного способа определить первый рендер и последний анмоунт, почему-то с ходу не могу вспомнить где это было нужно, но пару раз точно было, насчет варнингов при установки стейта - это логично и безобидно, и вполне может быть ожидаемым поведением, если запрос нельзя заабортить и запрос не может измениться.
По моему проблема с неактуальными запросами на сервер при быстрой смене роута вполне актуальна. Более того если запросы на сервер разные в рамках одного компонента, и меняются опираясь на массив зависимостей, то при быстрой смене той самой зависимости компонент будет сходить с ума - отображать данные от предыдущих запросов. Так что хак с boolean переменной вполне оправдан.
Парни. Возможно, при маунте компонента вообще не надо писать в useEffect запрос. Либо в рендер функции самописный хук а-ля реакта квери, или же можно вообще в react-router-dom loader свойство в createBrowserRouter сделать, оно и перед маунтом сработает, либо шину какую-то свою написать. И логичнее будет, что так данные перед маунтом зафетчатся, а не после. В кейсах с СТМами. А если на стейтах обычных реактовских - то хук самописный в рендер функции и всё.
я почти правильно ответил (перепутал положение второго "RENDER"), а в целом я знаю как это работает, тоже одно время пришлось с этим стрик модом по**аться
В rtk-query есть кэширование и одинаковый запрос не будет отправлен. По прерыванию при размонтировании: мы в return добавили прерывание запроса, а не игнорирование ответа. Чтобы если запрос не нужен, то ресурсы даже не тратились на него, и опять же в rtk-query это легко сделать.
Удалил со своего проекта СтриктМод, а потом подумал, и удалил весь реакт из проекта. Потому что да, вот поэтому, все как мы любим, гениальные идеи типа а давайте в деве будет не так, как на продакшене. А давайте еще цвета будут другими, и шрифты? А то люди не следят за контрастами и аксессебилити, почему нет? А заодно и писать на деве давайте на другом языке, а потом переписывать в продашен. Ах да, и на другой платформе, давайте в деве на другой платформе писать. А на продакшене -- тоже в другой. Вот и удалил, хорошая же идея.
стрикт на больших прилагах может сильно замедлять разработку, и бывают еще другие приколы с сайд эффектами и библами плюс мы юзаем логирование, и оно его оч сильно засирает, что не помогает при фиксе багов :)
@@it-sin9k например коммент ниже, иногда у тебя это может быть провайдер, который в целом никогда такого поведения не ожидает и тебе приходится писать костыли ради дев кода. Бывает люди находят ошибки, которых нет и пытаются их понять - что съедает время, как и ошибки внутри библиотек, на которые они не могут повлиять напрямую, но оно никогда не отломается на проде покрыть все кейсы мира везде - это очень дорогое удовольствие
Да, warning по поводу попытки обновления state у уже размонтированного компонента напрягает. Но вот эти все флаги типа ignore - тоже, на мой взгляд, то еще решение. С большой степенью вероятности при монтировании компонента будет отправлено не 1, а 5 запросов - это что, значит пять флагов? И даже если не 5, а все-таки один, который отслеживает размонтирован ли компонент, то в каждом useEffect такую кострукцию городить... нужна какая-то абстракция на уровне сервиса, котрая это отслеживает.
Легковесная обертка над fetch, кратно улучшает читабельность кода ;) Т.е да, флаги, если они нужны, будут под капотом хука useFetch, но внутри компонента будет все красиво.
Я думаю, что можно обернуть только свой код, а провайдер оставить снаружи. Если ты, конечно, не хочешь потестить редакс и допилить его в случае ошибки) Кстати, стрикт модом сожно оборачивать любой компонент, даже выборочно разные участки кода заворачивать в свой ситрикт мод.
Огромное спасибо. Теперь удаляю с пониманием)
ааххаха) хорошо сказано)
А я с удовольствием. Костыль архитектуры библиотеки, это стоит называть именно так!
Спасибо большое. Смотрел устаревший материал по реакту и всё гадал почему куча рендеров и запросов на сервак, сейчас стало чуточку понятнее...
Синяк, низкий тебе и помощникам поклон!
Ооочень полезная информация. Ставлю 👍 и жду нового подробного контента😊. Многие кого я знаю, пользуются твоим открывающим подводные камни материалом
Спасибо большое! Я рад, что мои видео помогают прокачиваться!)
отлично, как и много раз до этого раскрываешь тему которую все игнорируют
спасибо автору, ждём ещё больше откровений
Спасибо! Эту тему я сам долго игнорировал) и наконец то пришлось с ней столкнуться)
Буквально неделю назад разбирался с этой темой)) А сейчас с удовольствием послушал. Спасибо за контент друг
2:09 - только Strict Mode ~выключен~ включен?
Видео полезное, многие просто не включают стрикт мод и не вникают что это и для чего
Для вникания надо читать доки и практиковать(но не проектах).
спасибо большое!
весьма любопытно, спасибо!
Вроде все из лучших побуждений, но все еще не хватает явного способа определить первый рендер и последний анмоунт, почему-то с ходу не могу вспомнить где это было нужно, но пару раз точно было, насчет варнингов при установки стейта - это логично и безобидно, и вполне может быть ожидаемым поведением, если запрос нельзя заабортить и запрос не может измениться.
Спасибо за видео! Очень бы хотелось услышать от тебя большой доклад о работе RSC.
В планах есть такое видео)
@@it-sin9k это отлично! С меня донат ;)
Удалил года три назад с проекта СтриктМод, думал это видео заставит меня вернуть его, не заставило xD
Попытка не пытка))
смотрел выпуски как развлечения. а вот в этом выпуске уже интересное увидел.
По моему проблема с неактуальными запросами на сервер при быстрой смене роута вполне актуальна. Более того если запросы на сервер разные в рамках одного компонента, и меняются опираясь на массив зависимостей, то при быстрой смене той самой зависимости компонент будет сходить с ума - отображать данные от предыдущих запросов. Так что хак с boolean переменной вполне оправдан.
Так это же не хак, а вполне себе straightforward решение)
А ещё более семантичным решением будет использовать AbortController
@user-me5zb5qi9b Да. Я там есть)
а почему у вас такие ники user-pi и user-me?
уже не первый раз вижу в комментах видосов разных ютуберов, словно сгенерированы.
@@alexs7931Сложно сказать) Раньше было нормально. Потом стало так. Уже давненько. Меня особо не напрягает
Я еще слишком молод для такого 😅 Поживу еще немного в свое удовольствие))
привет.
Сними ролик о правильном фетчинге данных с редаксом без useEffect, пожалуйста
Здравствуйте, вопрос не по теме, но хотелось бы узнать ваше мнение. Нормально будет ли использовать в handlechange - ах инпута не useState а ref?
смотря для какой цели) почему возник такой запрос?
@@it-sin9k вот смотрю на многие сайты, яндекс и вк там когда в инпуте что-то вводиш, не происходит перерендер. Вот как они это сделали?)
Оч круто!
Пойду верну Strict Mode в проект)
Уже значит не зря видео записали!)
Никогда не удалял StrictMode :)
Вот это респект!)
В первые вижу такую крутую подачу
Парни.
Возможно, при маунте компонента вообще не надо писать в useEffect запрос. Либо в рендер функции самописный хук а-ля реакта квери, или же можно вообще в react-router-dom loader свойство в createBrowserRouter сделать, оно и перед маунтом сработает, либо шину какую-то свою написать. И логичнее будет, что так данные перед маунтом зафетчатся, а не после. В кейсах с СТМами. А если на стейтах обычных реактовских - то хук самописный в рендер функции и всё.
Тут надо дождаться анонса 19-ой версии React. Они там кажется подготовили хук отдельный для запросов, вместо useEffect :)
@@it-sin9k ого-го)
я почти правильно ответил (перепутал положение второго "RENDER"), а в целом я знаю как это работает, тоже одно время пришлось с этим стрик модом по**аться
Почти) правильно угадал) я с этим сталкивался
Спасибо
Крутое видео
1:38 - стрикт мод ВЫКЛЮЧЕН
2:08 - стрикт мод ВЫКЛЮЧЕН
Ээээ, что?!?!
2:08 - м.б. включен??
Да) оговорочка вышла)
В rtk-query есть кэширование и одинаковый запрос не будет отправлен. По прерыванию при размонтировании: мы в return добавили прерывание запроса, а не игнорирование ответа. Чтобы если запрос не нужен, то ресурсы даже не тратились на него, и опять же в rtk-query это легко сделать.
Удалил со своего проекта СтриктМод, а потом подумал, и удалил весь реакт из проекта. Потому что да, вот поэтому, все как мы любим, гениальные идеи типа а давайте в деве будет не так, как на продакшене. А давайте еще цвета будут другими, и шрифты? А то люди не следят за контрастами и аксессебилити, почему нет? А заодно и писать на деве давайте на другом языке, а потом переписывать в продашен. Ах да, и на другой платформе, давайте в деве на другой платформе писать. А на продакшене -- тоже в другой. Вот и удалил, хорошая же идея.
на чем переписал?)
Ещё есть момент, что можно получить ошибки за счёт разницы в поведении дев и прод режимов
Фиговая фишка, когда есть операции модификации данных на бэке
как раз таки наоборот, вы должны отменять запросы, а useEffect вызывается дважды очень быстро, там точно бэкэнд не успеет отработать
Удалял strict mode раньше и впредь буду.
Нет не удалось)
function useSafeState(initialState) {
const mounted = useRef(false);
const [state, update] = useState(initialState);
const setState = useCallback((value: SetStateAction) => {
if (mounted.current) update(value);
}, []);
useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
}
}, []);
return [state, setState];
}
стрикт на больших прилагах может сильно замедлять разработку, и бывают еще другие приколы с сайд эффектами и библами
плюс мы юзаем логирование, и оно его оч сильно засирает, что не помогает при фиксе багов :)
а как оно замедляет разработку?
Делает невозможным отследить маунт и анмаунт компонента
@@it-sin9k например коммент ниже, иногда у тебя это может быть провайдер, который в целом никогда такого поведения не ожидает и тебе приходится писать костыли ради дев кода. Бывает люди находят ошибки, которых нет и пытаются их понять - что съедает время, как и ошибки внутри библиотек, на которые они не могут повлиять напрямую, но оно никогда не отломается на проде
покрыть все кейсы мира везде - это очень дорогое удовольствие
сегодня было обсуждение по поводу добавить в наш текущий проект StrictMode, жду с нетерпением грабли об которые му ударимся))
@@it-sin9k тогда жду с нетерпением фидбэка)
Да, удалось ответить. Т.к. сам разбирался в StrictMode)
Круто! красавчик!)
Да, warning по поводу попытки обновления state у уже размонтированного компонента напрягает. Но вот эти все флаги типа ignore - тоже, на мой взгляд, то еще решение. С большой степенью вероятности при монтировании компонента будет отправлено не 1, а 5 запросов - это что, значит пять флагов? И даже если не 5, а все-таки один, который отслеживает размонтирован ли компонент, то в каждом useEffect такую кострукцию городить... нужна какая-то абстракция на уровне сервиса, котрая это отслеживает.
Легковесная обертка над fetch, кратно улучшает читабельность кода ;)
Т.е да, флаги, если они нужны, будут под капотом хука useFetch, но внутри компонента будет все красиво.
боюсь strict mode)))
Хотел спросить в телеге, но подумал, что лучше тут)
Что должно быть в иерархии выше? Провайдер над Стриктом или наоборот?
{ ... }
В идеале StrictMode над провайдером
Я думаю, что можно обернуть только свой код, а провайдер оставить снаружи. Если ты, конечно, не хочешь потестить редакс и допилить его в случае ошибки) Кстати, стрикт модом сожно оборачивать любой компонент, даже выборочно разные участки кода заворачивать в свой ситрикт мод.