Не делай такое с useState! Топ 5 ошибок junior React-разработчика

Часто начинающие React-разработчики используют хук или неправильно или не по назначению. В этом видео мы попытаемся разобраться с самыми популярными ошибками/багами с использованием useState и научимся их исправлять.
⏰ Таймкоды:
00:00:00 Начало
00:00:58 useState + setInterval/setTimeout
00:04:48 Работа со старым стейтом
00:08:08 Обращение к undefined внутри стейта
00:14:25 Не надо хранить в useState все данные
00:16:44 Неправильное изменение стейта (мутация)
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
#react #usestate #state #reactstate #стейт #setstate #junior #реакт #разработка

[@GroundGamer]

Если объяснить весь ролик коротко, то вот: 1. Хочешь предыдущее значение ? Используй callback функцию с аргументом в виде предыдущего значения 2. Не хочешь ошибок в "пустом" useState ? Ставь default случай 3. Данные обновляются ? Используй useState 4. Манипуляция над списками: 4.1.Хочешь обновить список ? Делай так: setState(...state, newState) 4.2. Хочешь удалить из списка элемент ? Делай так: 4.2.1. const cloneTasks = [...tasks] 4.2.2. cloneTasks.splice(${нужный индекс задачи}, 1) 4.2.3. setState(...state, cloneTasks) 4.3. Хочешь изменить элемент списка ? Делай так: 4.3.1. const formedTasks = tasks.map(task, i => { if (i === 1) { return { text: 'newText' } }} return task) 4.3.2. setState(...state, formedTasks) Получается топ 4?))

[@kawaikaino5277]

а почему именно splice, а не скажем .filter ? )

[@GroundGamer]

@@kawaikaino5277 я лично выбрал splice, чтобы проще делать отладку, в случае чего-то. Кнч, можно сделать что-то такое: 1. const formedTasks = state.filter(...) 2. return formedTasks Но также, в splice ты можешь начать с индекса таски, которую тебе нужно удалить, а не идти по целому списку. Как бы да, ты используешь проход по массиву, так как и filter, но в конкретном случае, как я понимаю, splice начинает с определённого индекса массива и затем уже делает те действия, которые нам нужны. По поводу "проход по массиву", я начал разъяснять так, как примерно работает под капотом Если в чём-то не прав, поправьте меня пожалуйста))

[@kawaikaino5277]

​@@GroundGamer По поводу, прохода по всему массиву, при использовании filter. а. В большинстве случаев, это экономия на муравьях, т.к чаще всего не приходится работать с длинными массивами б. Ну уж, если пришлось обработать длинный, на сколько мне известно движок под капотом оптимизирует выполнение filter (но это не точно) Спасибо за ответ

[@lirrr6555]

@@GroundGamer зачем здесь переменная formedTasks? filter иммутабелен, можно сразу делать return state.filter(...)

[@GroundGamer]

@@lirrr6555 Можно, конечно. В целом, хоть однострочные решения и "красивы", но иногда, они сложны для отладки, допустим когда у нас в фильтре (или ещё в каком либо методе массива), содержится ещё один массив по которому нам нужно пройтись, и вся их "красота" перестаёт быть "красотой" и превращается в "чудовище", которое ещё бывает сложно прочитать разрабу. Поэтому, я выбрал для себя такое написание переменных, как за основу

[@serjmarkelov9915]

Я перерыл много обучающих видео на youtube включая англоязычные, но твоя подача контента и умение объяснять превосходят всё и вся. Спасибо большое)

[@user-wl2xp8yo6x]

мне кажется ты просто плохо ищешь)) Многие штуки он берет как раз из зарубежного ютуба.

[@connectw]

@@user-wl2xp8yo6x Привет. Можешь порекомендовать зарубежных ютуберов по реакту?

[@TonyPony7]

нигде не обходится без льстецов!

[@user-le6ly6ri6t]

Огромная благодарность за такое видео про особенности useState! Будем ждать про другие хуки в том же формате!

[@rustamakhmetyanov4404]

Спасибо за работу, любое обучающее видео от вас интересно, тем более такого формата. Интересен ещё useEffect с его побочками и проблемами.

[@nafisgarifullin7199]

Очень все понятно и доступно, спасибо тебе за такой классный материал 👍 Таких очень мало, кто может объяснить так доходчиво и просто

[@yauheniramankou5491]

Спасибо, полезная информация, как и сама рубрика разбора типичных и не только ошибок)

[@dmitriykarabasov1440]

Отличный контент! Продолжайте, мы ждём!

[@jimsaharov]

Спасибо за урок! Очень грамотно объясняете материал и к тому же в таких тонкостях. Для меня как новичка - это просто бесценная информация! Успехов Вам!

[@ArtDen100]

Ты невероятно круто объясняешь!!! Запиши видео по всем основным хукам, это будет супер

[@vansowboy]

Отличный ролик, полезная инфа!) Ждем еще

[@galichandreyschool]

Замечательный видеоролик! Благодарю за Ваш труд! Успехов! 😊👍

[@user-dn4ry3uw8i]

Плакать от счастья хочется. Очень актуально🥲Спасибо огромное❤❤❤❤❤

[@user-hu4fy4ce1f]

Все что ты делаешь, все интересно. Продолжай в том же духе!

[@user-hd5op3rt3e]

Интересно! Давай еще! Спасибо!)

[@Sergey-vh3vj]

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

[@andreikrashas7155]

Как всегда красавчик, всё по полочкам!

[@user-fq4pc7fm2z]

уже заждались новые видео!

[@user-pw3zu1ed4v]

Спасибо большое за такие видео. Просто не представляешь как твой мини-урок помог мне с задачей. Могу скрин потом выслать))) захотелось даже статью а блоге написать)

[@user-si8tx5sk9s]

Продолжай!Спасибо тебе за объяснения!

[@-rk]

Арчаков, большое спасибо!

[@VolodymyrSirenko]

Очень полезное видео, спасибо! Я, как начинающий , не все смог переварить,. но от половины видео есть реальная польза! :)

[@alexanderkomanov4151]

Классно! Хотелось бы про useEffect как продолжение ну и про остальные тоже. 😀

[@vladfolk2418]

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

[@daniil__kryuchkov]

это ровно то что я искал! жаль что только один хук был описан, жду еще подобных видео, лайк, подписка

[@Imperfectwow]

Классный ролик, много для себя подчеркнул.

[@YuliyaAnts]

Очень интересно! Буду ждать видео и для других хуков :)

[@kentavr16]

Хорошее обобщающее видео. Думаю будет интересно увидеть нечто подобное о пропсах.

[@Soap9613]

Очень интересно даже того, кто не знает реакт, но знает js! Давай ещё!))

[@MaximSeleznev]

Очень круто! Спасибо!

[@abikideas]

Ухты, спасибо большое. Столько времени сидел и не понимал, почему меняю state объекта, а ничего не рендерится. Как больно быть новичком в чем-то )

[@murrmax1466]

спасибо большое! Вот тебе комментарий, хотелось бы больше таких видео по реакту!

[@unknown.6914]

Как для начинающего разработчика, очень полезное видео, Спасибо !

[@T800Cyberdine]

Очень полезный видос! Жалко что не посмотрел его пару недель назад, сэкономил бы кучу своего времени. (к решению пришел сам, перепробовав кучу вариантов и вникнув в суть самой проблемы мутации массивов. Но времени затратил на это немеряно.)

[@ArchakovBlog]

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

[@AmericanDragon134]

@@ArchakovBlog а какая у тебя клавиатура?

[@ivankprod]

Неплохие советы) Лайк!

[@stellarlay517]

Начиная с 10-й минуты, по поводу undefined в users: как-то немного замудренно объяснял) Просто должно быть понимание, что useEffect отрабатывает только ПОСЛЕ рендера компонента. Поэтому и undefined, потому что при рендере useEffect ещё не отработал, а начнет свое выполнение только после отрисовки разметки и уже тогда из-за setUsers произойдет ре-рендер и мы увидим наших пользователей. То есть людям нужно донести именно базовое понимание того, почему мы undefined сначала получаем, иначе никто так и не поймет ничего А так за видос респект, прошел по основным "грубым" ошибкам!:)

[@2Extremum]

Для понимания надо сначала на этом же канале посмотреть очень понятное видео о useEffect

[@user-kt7fm6ow4p]

Спасибо. Стала понятна 2 глава документации React

[@andreyh6934]

Спасибо! очень классно объясняешь! Продолжай в том же духе и будет зашибись. ))

[@unknownWakeborder]

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

[@user-eg2nn4ww7r]

Максимально понятно и доходчиво

[@saperovtop]

Огонь! 🔥

[@roshin-1]

Спасибо большое! Теперь я понял как это работает)

[@user-wt8sq9om6c]

Супер спасибо!!! Если так разберать все топовые хуки, то будет агонь, агнинский!!!

[@hello-gq4yi]

Лайк поставлен , комментарий соответственно 🌚🫡

[@user-dp1ke7bx7c]

Супер контент !!

[@user-rk1nn9xi7o]

действительно полезное видео. спасибо

[@Zubairavvv]

Пишу лайк, ставлю комментарий и показываю что мне интересно )

[@Oleg_Artemov]

очень интересно! расскажи пожалуйста про использование хука useLayoutEffect

[@user-nb7cv5px1v]

Очень очень классный ролик. Да и вообще канал крутой. Спасибо за Реакт-пиццу

[@ihor7307]

Круто. Давай про другие хуки. С более конкретными примерами использование

[@haibova_irisha]

привет еще раз ! знаю сейчас не луяшое время , но нету ли в планах сделать какой-то малеьний проект используя react , redux , rtk query , ts ? спасибо

[@deceser8057]

Збс, продолжай!

[@erzhan225]

Да, давай ещё эту рубрику

[@maronwilsons]

Денис ждем новый интенсив по Next.js + TypeScript, оч хотим((

[@user-gp5cq8pp1o]

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

[@LavandaKicK]

Благодарю за видео и вообще контент, очень полезный! Лично мне было бы интересно посмотреть как писать CSR приложение на React, с db на postgres, sequelize-cli, сервер на express, webpack, регистрация-авторизация на JWT(c access token и refresh token), bcrypt, модалки, мультеры(загрузка-выгрузка файлов) и конечно как писать endpoints api и render на бек, всё связывать и защищать. Мне думается что задача сложна для начинающего фулстека, поднять сервак, и на хуках параллельно связывать фронт и бэк. Книжный клуб например. А вообще хотел узнать что за тема в VSCODE??? =))))

[@user-qd5rj5iz3h]

Отличное видео

[@samiroutka]

Благодарю, неплохо помог

[@user-mv8bu5jy2n]

Ролик и интересный и полезный! Сделай пожалуйста по остальным хукам!

[@slavikvasin9095]

юзколбек и юзмемо ошибки ждем) и хотелось бы больше по тулкиту инфы и парочку мнений на счет актуальности стека через обычный редакс и классы, не приведет ли это к потери актуальности на рынке через пару лет такой работы, при активном развитии тулкита и функциональных комп. есть ли смысл ломать голову в коде на классах в 23-24 годах? так же хотелось бы услышать мнение о TS, очень многие его нахваливают, но я слышал мнение от очень крутых разрабов, что тс нужен только если ты изначально пишешь хреновый код ибо слабые разрабы хейтят не строгую типизацию, а потом скилапнувшись наоборот восхваляют возможности динамической типизации... как то так

[@-slever-68]

Будут ли новые полные курсы (на несколько видосов)? Если да, то будут ли для premiddle/middle и как скоро?

[@SeverHolod]

Будут ли еще видео по React Native? Жду с нетерпением

[@vladimirv787]

Спасибо!

[@Grigoren_com]

спасибо! хорошо всё.

[@stanislavsapogov9268]

Спасибо за видео! Скажи, плиз, почему в случае с работой с массивами опять не воспользоваться функцией и не написать setState(prev => [...prev, newTask])?

[@user-du5zb3zl2b]

Привет) спасибо за видео! а когда будет про (не используй везде useCallback и memo) ?

[@____Olga__]

Расскажи по возможности, пожалуйста про все костыли useCallback() & useEffect()

[@mikalai_root]

Спасибо за некоторые интересные моменты. Маленький вопросик: а почему setInterval не убили в ретерне юзэффекта?

[@alekseyberezov8020]

Бро, продолжай пожалуйста!!!

[@tanercoder1915]

Важно также возвращать cleanup callback из useEffect когда есть любые подписки и счётчики.

[@haibova_irisha]

Привет , ,с Новым годом ! а можно более подробно о мутациях ? Как правильно использовать с redux toolkit , спасибо

[@Albert-pm6uf]

Можете подсказать как сделать такое же плавное перемещение курсора?

[@user-tr8gr6bl2u]

В первом случае что нам мешает добавить count в массив зависимости в useEffect?

[@kspshnik]

Доброе утро! Про useLayoutEffect() было бы суперкруто :)

[@raff_m_d6971]

Формат отличный

[@user-dp1ke7bx7c]

Теперь понятно что такое мутация объекта.

[@azizoid]

А почему в примере с тасками вы не работаете с предыдущими значениями как в первом примере?

[@arman-6172]

18:20 Привет. Что думаешь, если всегда использовать в таком виде: setTask((tasks) => [...task, text]) какие плюсы: 1. Ты всегда работаешь с данными, которые хранит хук 2. Если нужно будет юзать Memo или в useState хранится объект, который нужно менять от других эффектов, то не нужно будет условный tasks прописывать в зависимости эффектов 🤔

[@Daemond15]

Спасибо за крутотень

[@javascriptov]

Гоу видос про useCallback | useMemo

[@serheyjankowsky6899]

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

[@kaze9308]

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

[@dpoleev]

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

[@mikalai_root]

Перерендер родителя из потомка? 1. Callback функцией, переданной как пропс. 2. Изменение переменной глобального стэйта приложения ( пример с условным редаксом: в чайлде используешь диспатч и изменяешь переменную, которая используется в родителе.). Наверняка есть ещё какие-нибудь извращённые способы, типо поиска элементов родителя в dom дереве и прямые манипуляции нативным джаваскриптом( всякие append и т.д.)

[@tastebublik]

Очень ждем новые видео

[@dmitrylem7703]

Хочу больше роликов про best practices

[@goqorhovhannisyan2048]

Привет Арчаков, пожалуйста, сделайте видео о миксе useContext + useReducer в качестве замены Redux-а.

[@killd0z3r]

Подскажите, кто знает как цветовая тема называется? Спасибо тем кто ответит

[@haibova_irisha]

Спасибо большое !!! очень крутая подача ) а на boosty ты ессть новый контент ?

[@ArchakovBlog]

Сначала новый контент выходит там. Это видео появилось в Ютубе через неделю только, поле бусти

[@haibova_irisha]

@@ArchakovBlog спасибо

[@yoerh]

Ждём видео об остальных хуках

[@joper3703]

Да, давай пожалуйста про useMemo и useCallback

[@Santos20004]

а в самом первом примере если useEffect то почему не просто посадить count массив для отслеживания? и как так завести интервал и не убить его в return прорисовку count вообще вынести за пределы useEffect?

[@algum4678]

Про usememo с использованием react devtools (как проверять лишние отрисовки) пожалуйста расскажи

[@user-ic4dk4sp3y]

Топи топи интересно же и залипательно

[@endoscopy8351]

А как сделать подсказки в выпадающем списке, как на 20:29?

[@jamjam3337]

👏👍

[@user-tn1yc1ij8d]

Гоу видосы про useForm и про валидацию

[@lukts7839]

Спасибо за видео. Чнм больше хуков, тем лучше.

[@user-yo7bj9yj3g]

👍

[@arturmavlidov247]

❤‍🔥

[@nexakasaki]

Норм, новичкам самое то

[@ryskin82]

Хочешь удалить из списка элемент делай просто filter c нужными условиями

[@Vansun0077]

Хмм, я вот редактирую элементы в масиве немного по другому, в видео автор делает map, тоесть проходиться по всему массиву, я же в самом setState, ищу элемент по индексу const editItem = state/previousState[index] , потом его редактирую и потом возвращаю новый масив с отредактированным элементом. Я так подозреваю что в видео способ получше ? Ибо для меня такая логика, меньше циклов-лучше способ.