Почему удалять StrictMode плохая идея?

Во всех моих проектах StrictMode удалялся при старте проекта. И сегодня я разберу в деталях почему это была плохая идея!
StrictMode документация - react.dev/reference/react/Str...
Ссылка на телеграмм канал
t.me/it_sin9k
Поддержать Айти Синяка можно здесь:
KZread: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:36 Устаревшее API
01:14 Викторина!
02:34 Зачем нужен двойной рендер?
03:47 Эквивалентные рендеры
05:10 Двойной useEffect
06:30 Двойной http запрос
09:12 Подписывайтесь на ТГ канал
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер: 77

  • @perejro9916
    @perejro99168 ай бұрын

    Огромное спасибо. Теперь удаляю с пониманием)

  • @it-sin9k

    @it-sin9k

    8 ай бұрын

    ааххаха) хорошо сказано)

  • @user-ox4yl6gu3u

    @user-ox4yl6gu3u

    26 күн бұрын

    А я с удовольствием. Костыль архитектуры библиотеки, это стоит называть именно так!

  • @vitek8137
    @vitek81375 ай бұрын

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

  • @IT-Svyatoslav
    @IT-Svyatoslav9 ай бұрын

    Синяк, низкий тебе и помощникам поклон! Ооочень полезная информация. Ставлю 👍 и жду нового подробного контента😊. Многие кого я знаю, пользуются твоим открывающим подводные камни материалом

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    Спасибо большое! Я рад, что мои видео помогают прокачиваться!)

  • @kl3yto733
    @kl3yto7339 ай бұрын

    весьма любопытно, спасибо!

  • @TheTexPro
    @TheTexPro9 ай бұрын

    спасибо большое!

  • @pollstetchem
    @pollstetchem9 ай бұрын

    Буквально неделю назад разбирался с этой темой)) А сейчас с удовольствием послушал. Спасибо за контент друг

  • @user-dw8lb8lc7u
    @user-dw8lb8lc7u9 ай бұрын

    отлично, как и много раз до этого раскрываешь тему которую все игнорируют спасибо автору, ждём ещё больше откровений

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    Спасибо! Эту тему я сам долго игнорировал) и наконец то пришлось с ней столкнуться)

  • @Ramosok
    @Ramosok9 ай бұрын

    Оч круто!

  • @user-rz4fv4ry9p
    @user-rz4fv4ry9p8 ай бұрын

    Спасибо за видео! Очень бы хотелось услышать от тебя большой доклад о работе RSC.

  • @it-sin9k

    @it-sin9k

    8 ай бұрын

    В планах есть такое видео)

  • @user-rz4fv4ry9p

    @user-rz4fv4ry9p

    8 ай бұрын

    @@it-sin9k это отлично! С меня донат ;)

  • @oWeRQ666
    @oWeRQ6669 ай бұрын

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

  • @Virass
    @Virass9 ай бұрын

    Я еще слишком молод для такого 😅 Поживу еще немного в свое удовольствие))

  • @user-uj1vg6gq2e
    @user-uj1vg6gq2e9 ай бұрын

    Видео полезное, многие просто не включают стрикт мод и не вникают что это и для чего

  • @n_dudin

    @n_dudin

    9 ай бұрын

    Для вникания надо читать доки и практиковать(но не проектах).

  • @romanmed9035
    @romanmed90355 ай бұрын

    смотрел выпуски как развлечения. а вот в этом выпуске уже интересное увидел.

  • @ramilgaripov3447
    @ramilgaripov34479 ай бұрын

    Никогда не удалял StrictMode :)

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    Вот это респект!)

  • @aleksprimetv
    @aleksprimetv3 ай бұрын

    Удалил года три назад с проекта СтриктМод, думал это видео заставит меня вернуть его, не заставило xD

  • @it-sin9k

    @it-sin9k

    3 ай бұрын

    Попытка не пытка))

  • @hydrock9738
    @hydrock97389 ай бұрын

    Спасибо

  • @user-mx1pj7fg1q
    @user-mx1pj7fg1qКүн бұрын

    Крутое видео

  • @user-bx7yp9gy7f
    @user-bx7yp9gy7f8 ай бұрын

    Здравствуйте, вопрос не по теме, но хотелось бы узнать ваше мнение. Нормально будет ли использовать в handlechange - ах инпута не useState а ref?

  • @it-sin9k

    @it-sin9k

    8 ай бұрын

    смотря для какой цели) почему возник такой запрос?

  • @user-bx7yp9gy7f

    @user-bx7yp9gy7f

    8 ай бұрын

    @@it-sin9k вот смотрю на многие сайты, яндекс и вк там когда в инпуте что-то вводиш, не происходит перерендер. Вот как они это сделали?)

  • @Ramosok
    @Ramosok9 ай бұрын

    Почти) правильно угадал) я с этим сталкивался

  • @user-pi1vr6rf1k
    @user-pi1vr6rf1k9 ай бұрын

    По моему проблема с неактуальными запросами на сервер при быстрой смене роута вполне актуальна. Более того если запросы на сервер разные в рамках одного компонента, и меняются опираясь на массив зависимостей, то при быстрой смене той самой зависимости компонент будет сходить с ума - отображать данные от предыдущих запросов. Так что хак с boolean переменной вполне оправдан.

  • @NEWESTERS

    @NEWESTERS

    9 ай бұрын

    Так это же не хак, а вполне себе straightforward решение) А ещё более семантичным решением будет использовать AbortController

  • @user-pi1vr6rf1k

    @user-pi1vr6rf1k

    9 ай бұрын

    @user-me5zb5qi9b Да. Я там есть)

  • @alexs7931

    @alexs7931

    9 ай бұрын

    а почему у вас такие ники user-pi и user-me? уже не первый раз вижу в комментах видосов разных ютуберов, словно сгенерированы.

  • @user-pi1vr6rf1k

    @user-pi1vr6rf1k

    9 ай бұрын

    @@alexs7931Сложно сказать) Раньше было нормально. Потом стало так. Уже давненько. Меня особо не напрягает

  • @Flamel001100
    @Flamel0011009 ай бұрын

    2:09 - только Strict Mode ~выключен~ включен?

  • @alexcebotov5052
    @alexcebotov50529 ай бұрын

    Пойду верну Strict Mode в проект)

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    Уже значит не зря видео записали!)

  • @romandeveloper7720
    @romandeveloper77208 ай бұрын

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

  • @WebBestMaster
    @WebBestMaster9 ай бұрын

    я почти правильно ответил (перепутал положение второго "RENDER"), а в целом я знаю как это работает, тоже одно время пришлось с этим стрик модом по**аться

  • @romandeveloper7720
    @romandeveloper77202 ай бұрын

    Парни. Возможно, при маунте компонента вообще не надо писать в useEffect запрос. Либо в рендер функции самописный хук а-ля реакта квери, или же можно вообще в react-router-dom loader свойство в createBrowserRouter сделать, оно и перед маунтом сработает, либо шину какую-то свою написать. И логичнее будет, что так данные перед маунтом зафетчатся, а не после. В кейсах с СТМами. А если на стейтах обычных реактовских - то хук самописный в рендер функции и всё.

  • @it-sin9k

    @it-sin9k

    2 ай бұрын

    Тут надо дождаться анонса 19-ой версии React. Они там кажется подготовили хук отдельный для запросов, вместо useEffect :)

  • @romandeveloper7720

    @romandeveloper7720

    2 ай бұрын

    @@it-sin9k ого-го)

  • @user-pt2uz5st7i
    @user-pt2uz5st7i9 ай бұрын

    В первые вижу такую крутую подачу

  • @user-uj1vg6gq2e
    @user-uj1vg6gq2e9 ай бұрын

    В rtk-query есть кэширование и одинаковый запрос не будет отправлен. По прерыванию при размонтировании: мы в return добавили прерывание запроса, а не игнорирование ответа. Чтобы если запрос не нужен, то ресурсы даже не тратились на него, и опять же в rtk-query это легко сделать.

  • @paljm345
    @paljm3459 ай бұрын

    1:38 - стрикт мод ВЫКЛЮЧЕН 2:08 - стрикт мод ВЫКЛЮЧЕН Ээээ, что?!?! 2:08 - м.б. включен??

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    Да) оговорочка вышла)

  • @BearVodkaAndValenki
    @BearVodkaAndValenki9 ай бұрын

    Удалял strict mode раньше и впредь буду.

  • @thecatlucky
    @thecatlucky9 ай бұрын

    Да, удалось ответить. Т.к. сам разбирался в StrictMode)

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    Круто! красавчик!)

  • @user-hv8fh8gm5s
    @user-hv8fh8gm5s9 ай бұрын

    Ещё есть момент, что можно получить ошибки за счёт разницы в поведении дев и прод режимов

  • @K2_PS
    @K2_PS9 ай бұрын

    Нет не удалось)

  • @snatvb
    @snatvb9 ай бұрын

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

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    а как оно замедляет разработку?

  • @user-ce9ff2rj4o

    @user-ce9ff2rj4o

    9 ай бұрын

    Делает невозможным отследить маунт и анмаунт компонента

  • @snatvb

    @snatvb

    9 ай бұрын

    @@it-sin9k например коммент ниже, иногда у тебя это может быть провайдер, который в целом никогда такого поведения не ожидает и тебе приходится писать костыли ради дев кода. Бывает люди находят ошибки, которых нет и пытаются их понять - что съедает время, как и ошибки внутри библиотек, на которые они не могут повлиять напрямую, но оно никогда не отломается на проде покрыть все кейсы мира везде - это очень дорогое удовольствие

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

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

  • @snatvb

    @snatvb

    9 ай бұрын

    @@it-sin9k тогда жду с нетерпением фидбэка)

  • @n_dudin
    @n_dudin9 ай бұрын

    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]; }

  • @user-kz7lw2yl3w
    @user-kz7lw2yl3w9 ай бұрын

    Да, warning по поводу попытки обновления state у уже размонтированного компонента напрягает. Но вот эти все флаги типа ignore - тоже, на мой взгляд, то еще решение. С большой степенью вероятности при монтировании компонента будет отправлено не 1, а 5 запросов - это что, значит пять флагов? И даже если не 5, а все-таки один, который отслеживает размонтирован ли компонент, то в каждом useEffect такую кострукцию городить... нужна какая-то абстракция на уровне сервиса, котрая это отслеживает.

  • @ramilgaripov3447

    @ramilgaripov3447

    9 ай бұрын

    Легковесная обертка над fetch, кратно улучшает читабельность кода ;) Т.е да, флаги, если они нужны, будут под капотом хука useFetch, но внутри компонента будет все красиво.

  • @motolife4900
    @motolife49009 ай бұрын

    боюсь strict mode)))

  • @kri4evskiy
    @kri4evskiy9 ай бұрын

    Хотел спросить в телеге, но подумал, что лучше тут) Что должно быть в иерархии выше? Провайдер над Стриктом или наоборот? { ... }

  • @it-sin9k

    @it-sin9k

    9 ай бұрын

    В идеале StrictMode над провайдером

  • @ArtyomSamsonchik

    @ArtyomSamsonchik

    9 ай бұрын

    Я думаю, что можно обернуть только свой код, а провайдер оставить снаружи. Если ты, конечно, не хочешь потестить редакс и допилить его в случае ошибки) Кстати, стрикт модом сожно оборачивать любой компонент, даже выборочно разные участки кода заворачивать в свой ситрикт мод.

Келесі