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

  Переглядів 46,609

Archakov Blog

Archakov Blog

День тому

Часто начинающие 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 #реакт #разработка

КОМЕНТАРІ: 167
@GroundGamer
@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
@kawaikaino5277 Рік тому
а почему именно splice, а не скажем .filter ? )
@GroundGamer
@GroundGamer Рік тому
@@kawaikaino5277 я лично выбрал splice, чтобы проще делать отладку, в случае чего-то. Кнч, можно сделать что-то такое: 1. const formedTasks = state.filter(...) 2. return formedTasks Но также, в splice ты можешь начать с индекса таски, которую тебе нужно удалить, а не идти по целому списку. Как бы да, ты используешь проход по массиву, так как и filter, но в конкретном случае, как я понимаю, splice начинает с определённого индекса массива и затем уже делает те действия, которые нам нужны. По поводу "проход по массиву", я начал разъяснять так, как примерно работает под капотом Если в чём-то не прав, поправьте меня пожалуйста))
@kawaikaino5277
@kawaikaino5277 Рік тому
​@@GroundGamer По поводу, прохода по всему массиву, при использовании filter. а. В большинстве случаев, это экономия на муравьях, т.к чаще всего не приходится работать с длинными массивами б. Ну уж, если пришлось обработать длинный, на сколько мне известно движок под капотом оптимизирует выполнение filter (но это не точно) Спасибо за ответ
@lirrr6555
@lirrr6555 Рік тому
@@GroundGamer зачем здесь переменная formedTasks? filter иммутабелен, можно сразу делать return state.filter(...)
@GroundGamer
@GroundGamer Рік тому
@@lirrr6555 Можно, конечно. В целом, хоть однострочные решения и "красивы", но иногда, они сложны для отладки, допустим когда у нас в фильтре (или ещё в каком либо методе массива), содержится ещё один массив по которому нам нужно пройтись, и вся их "красота" перестаёт быть "красотой" и превращается в "чудовище", которое ещё бывает сложно прочитать разрабу. Поэтому, я выбрал для себя такое написание переменных, как за основу
@serjmarkelov9915
@serjmarkelov9915 Рік тому
Я перерыл много обучающих видео на youtube включая англоязычные, но твоя подача контента и умение объяснять превосходят всё и вся. Спасибо большое)
@user-wl2xp8yo6x
@user-wl2xp8yo6x Рік тому
мне кажется ты просто плохо ищешь)) Многие штуки он берет как раз из зарубежного ютуба.
@connectw
@connectw 9 місяців тому
@@user-wl2xp8yo6x Привет. Можешь порекомендовать зарубежных ютуберов по реакту?
@TonyPony7
@TonyPony7 6 місяців тому
нигде не обходится без льстецов!
@rustamakhmetyanov4404
@rustamakhmetyanov4404 Рік тому
Спасибо за работу, любое обучающее видео от вас интересно, тем более такого формата. Интересен ещё useEffect с его побочками и проблемами.
@user-le6ly6ri6t
@user-le6ly6ri6t Рік тому
Огромная благодарность за такое видео про особенности useState! Будем ждать про другие хуки в том же формате!
@jimsaharov
@jimsaharov Рік тому
Спасибо за урок! Очень грамотно объясняете материал и к тому же в таких тонкостях. Для меня как новичка - это просто бесценная информация! Успехов Вам!
@ArtDen100
@ArtDen100 Рік тому
Ты невероятно круто объясняешь!!! Запиши видео по всем основным хукам, это будет супер
@nafisgarifullin7199
@nafisgarifullin7199 10 місяців тому
Очень все понятно и доступно, спасибо тебе за такой классный материал 👍 Таких очень мало, кто может объяснить так доходчиво и просто
@dmitriykarabasov1440
@dmitriykarabasov1440 Рік тому
Отличный контент! Продолжайте, мы ждём!
@yauheniramankou5491
@yauheniramankou5491 Рік тому
Спасибо, полезная информация, как и сама рубрика разбора типичных и не только ошибок)
@galichandreyschool
@galichandreyschool Рік тому
Замечательный видеоролик! Благодарю за Ваш труд! Успехов! 😊👍
@alexanderkomanov4151
@alexanderkomanov4151 Рік тому
Классно! Хотелось бы про useEffect как продолжение ну и про остальные тоже. 😀
@MaximSeleznev
@MaximSeleznev 3 місяці тому
Очень круто! Спасибо!
@vansowboy
@vansowboy Рік тому
Отличный ролик, полезная инфа!) Ждем еще
@user-hd5op3rt3e
@user-hd5op3rt3e Рік тому
Интересно! Давай еще! Спасибо!)
@user-pw3zu1ed4v
@user-pw3zu1ed4v Рік тому
Спасибо большое за такие видео. Просто не представляешь как твой мини-урок помог мне с задачей. Могу скрин потом выслать))) захотелось даже статью а блоге написать)
@user-fq4pc7fm2z
@user-fq4pc7fm2z Рік тому
уже заждались новые видео!
@user-si8tx5sk9s
@user-si8tx5sk9s Рік тому
Продолжай!Спасибо тебе за объяснения!
@Sergey-vh3vj
@Sergey-vh3vj Рік тому
Спасибо, очень полезно разработчикам любого уровня. С массивами сам в свое время долго мучался и не мог понять.
@user-hu4fy4ce1f
@user-hu4fy4ce1f Рік тому
Все что ты делаешь, все интересно. Продолжай в том же духе!
@VolodymyrSirenko
@VolodymyrSirenko Рік тому
Очень полезное видео, спасибо! Я, как начинающий , не все смог переварить,. но от половины видео есть реальная польза! :)
@andreikrashas7155
@andreikrashas7155 Рік тому
Как всегда красавчик, всё по полочкам!
@-rk
@-rk Рік тому
Арчаков, большое спасибо!
@ivankprod
@ivankprod 6 місяців тому
Неплохие советы) Лайк!
@user-kt7fm6ow4p
@user-kt7fm6ow4p 4 місяці тому
Спасибо. Стала понятна 2 глава документации React
@user-dn4ry3uw8i
@user-dn4ry3uw8i Рік тому
Плакать от счастья хочется. Очень актуально🥲Спасибо огромное❤❤❤❤❤
@kentavr16
@kentavr16 Рік тому
Хорошее обобщающее видео. Думаю будет интересно увидеть нечто подобное о пропсах.
@andreyh6934
@andreyh6934 6 місяців тому
Спасибо! очень классно объясняешь! Продолжай в том же духе и будет зашибись. ))
@vladfolk2418
@vladfolk2418 3 дні тому
Спасибо большое, благодаря данному видео я теперь не допускаю подобных ошибок!🙏
@roshin-1
@roshin-1 Рік тому
Спасибо большое! Теперь я понял как это работает)
@user-rk1nn9xi7o
@user-rk1nn9xi7o 4 місяці тому
действительно полезное видео. спасибо
@murrmax1466
@murrmax1466 7 місяців тому
спасибо большое! Вот тебе комментарий, хотелось бы больше таких видео по реакту!
@hello-gq4yi
@hello-gq4yi Рік тому
Лайк поставлен , комментарий соответственно 🌚🫡
@YuliyaAnts
@YuliyaAnts Рік тому
Очень интересно! Буду ждать видео и для других хуков :)
@Soap9613
@Soap9613 Рік тому
Очень интересно даже того, кто не знает реакт, но знает js! Давай ещё!))
@Imperfectwow
@Imperfectwow Рік тому
Классный ролик, много для себя подчеркнул.
@unknown.6914
@unknown.6914 4 місяці тому
Как для начинающего разработчика, очень полезное видео, Спасибо !
@samiroutka
@samiroutka 9 місяців тому
Благодарю, неплохо помог
@Oleg_Artemov
@Oleg_Artemov Рік тому
очень интересно! расскажи пожалуйста про использование хука useLayoutEffect
@user-eg2nn4ww7r
@user-eg2nn4ww7r Рік тому
Максимально понятно и доходчиво
@abikideas
@abikideas Рік тому
Ухты, спасибо большое. Столько времени сидел и не понимал, почему меняю state объекта, а ничего не рендерится. Как больно быть новичком в чем-то )
@saperovtop
@saperovtop 9 місяців тому
Огонь! 🔥
@daniil__kryuchkov
@daniil__kryuchkov Рік тому
это ровно то что я искал! жаль что только один хук был описан, жду еще подобных видео, лайк, подписка
@erzhan225
@erzhan225 Рік тому
Да, давай ещё эту рубрику
@Grigoren_com
@Grigoren_com Рік тому
спасибо! хорошо всё.
@alekseyberezov8020
@alekseyberezov8020 Рік тому
Бро, продолжай пожалуйста!!!
@T800Cyberdine
@T800Cyberdine Рік тому
Очень полезный видос! Жалко что не посмотрел его пару недель назад, сэкономил бы кучу своего времени. (к решению пришел сам, перепробовав кучу вариантов и вникнув в суть самой проблемы мутации массивов. Но времени затратил на это немеряно.)
@ArchakovBlog
@ArchakovBlog Рік тому
молодец, что сам нашёл 👍 в идеале, нужно стараться сначала самому находить решения любым возможным способом и только потом искать его в подобных роликах и других готовых решениях
@AmericanDragon134
@AmericanDragon134 Рік тому
@@ArchakovBlog а какая у тебя клавиатура?
@unknownWakeborder
@unknownWakeborder Рік тому
Будет полезной инфа про основные хуки и их работу под капотом, а так же их стоимость выполнения, это поможет лучше понимать когда стоит их применять.
@user-wt8sq9om6c
@user-wt8sq9om6c Рік тому
Супер спасибо!!! Если так разберать все топовые хуки, то будет агонь, агнинский!!!
@user-gp5cq8pp1o
@user-gp5cq8pp1o Рік тому
Топ тема, делай больше таких видео, я как раз изучаю реакт, и был вопрос как лучше все это использовать нельзя же все хуки использовать на абум
@deceser8057
@deceser8057 Рік тому
Збс, продолжай!
@Zubairavvv
@Zubairavvv Рік тому
Пишу лайк, ставлю комментарий и показываю что мне интересно )
@SeverHolod
@SeverHolod Рік тому
Будут ли еще видео по React Native? Жду с нетерпением
@user-dp1ke7bx7c
@user-dp1ke7bx7c Рік тому
Супер контент !!
@vladimirv787
@vladimirv787 Рік тому
Спасибо!
@haibova_irisha
@haibova_irisha Рік тому
Привет , ,с Новым годом ! а можно более подробно о мутациях ? Как правильно использовать с redux toolkit , спасибо
@____Olga__
@____Olga__ Рік тому
Расскажи по возможности, пожалуйста про все костыли useCallback() & useEffect()
@tastebublik
@tastebublik Рік тому
Очень ждем новые видео
@LavandaKicK
@LavandaKicK 5 місяців тому
Благодарю за видео и вообще контент, очень полезный! Лично мне было бы интересно посмотреть как писать CSR приложение на React, с db на postgres, sequelize-cli, сервер на express, webpack, регистрация-авторизация на JWT(c access token и refresh token), bcrypt, модалки, мультеры(загрузка-выгрузка файлов) и конечно как писать endpoints api и render на бек, всё связывать и защищать. Мне думается что задача сложна для начинающего фулстека, поднять сервак, и на хуках параллельно связывать фронт и бэк. Книжный клуб например. А вообще хотел узнать что за тема в VSCODE??? =))))
@user-du5zb3zl2b
@user-du5zb3zl2b Рік тому
Привет) спасибо за видео! а когда будет про (не используй везде useCallback и memo) ?
@kspshnik
@kspshnik 9 місяців тому
Доброе утро! Про useLayoutEffect() было бы суперкруто :)
@user-qd5rj5iz3h
@user-qd5rj5iz3h Рік тому
Отличное видео
@user-nb7cv5px1v
@user-nb7cv5px1v Рік тому
Очень очень классный ролик. Да и вообще канал крутой. Спасибо за Реакт-пиццу
@haibova_irisha
@haibova_irisha Рік тому
привет еще раз ! знаю сейчас не луяшое время , но нету ли в планах сделать какой-то малеьний проект используя react , redux , rtk query , ts ? спасибо
@-slever-68
@-slever-68 Рік тому
Будут ли новые полные курсы (на несколько видосов)? Если да, то будут ли для premiddle/middle и как скоро?
@Daemond15
@Daemond15 Рік тому
Спасибо за крутотень
@maronwilsons
@maronwilsons Рік тому
Денис ждем новый интенсив по Next.js + TypeScript, оч хотим((
@stanislavsapogov9268
@stanislavsapogov9268 5 місяців тому
Спасибо за видео! Скажи, плиз, почему в случае с работой с массивами опять не воспользоваться функцией и не написать setState(prev => [...prev, newTask])?
@slavikvasin9095
@slavikvasin9095 Рік тому
юзколбек и юзмемо ошибки ждем) и хотелось бы больше по тулкиту инфы и парочку мнений на счет актуальности стека через обычный редакс и классы, не приведет ли это к потери актуальности на рынке через пару лет такой работы, при активном развитии тулкита и функциональных комп. есть ли смысл ломать голову в коде на классах в 23-24 годах? так же хотелось бы услышать мнение о TS, очень многие его нахваливают, но я слышал мнение от очень крутых разрабов, что тс нужен только если ты изначально пишешь хреновый код ибо слабые разрабы хейтят не строгую типизацию, а потом скилапнувшись наоборот восхваляют возможности динамической типизации... как то так
@ihor7307
@ihor7307 Рік тому
Круто. Давай про другие хуки. С более конкретными примерами использование
@stellarlay517
@stellarlay517 2 місяці тому
Начиная с 10-й минуты, по поводу undefined в users: как-то немного замудренно объяснял) Просто должно быть понимание, что useEffect отрабатывает только ПОСЛЕ рендера компонента. Поэтому и undefined, потому что при рендере useEffect ещё не отработал, а начнет свое выполнение только после отрисовки разметки и уже тогда из-за setUsers произойдет ре-рендер и мы увидим наших пользователей. То есть людям нужно донести именно базовое понимание того, почему мы undefined сначала получаем, иначе никто так и не поймет ничего А так за видос респект, прошел по основным "грубым" ошибкам!:)
@2Extremum
@2Extremum Місяць тому
Для понимания надо сначала на этом же канале посмотреть очень понятное видео о useEffect
@dmitrylem7703
@dmitrylem7703 Рік тому
Хочу больше роликов про best practices
@raff_m_d6971
@raff_m_d6971 Рік тому
Формат отличный
@user-mv8bu5jy2n
@user-mv8bu5jy2n Рік тому
Ролик и интересный и полезный! Сделай пожалуйста по остальным хукам!
@user-dp1ke7bx7c
@user-dp1ke7bx7c Рік тому
Теперь понятно что такое мутация объекта.
@mikalai_root
@mikalai_root Рік тому
Спасибо за некоторые интересные моменты. Маленький вопросик: а почему setInterval не убили в ретерне юзэффекта?
@user-ic4dk4sp3y
@user-ic4dk4sp3y Рік тому
Топи топи интересно же и залипательно
@yoerh
@yoerh Рік тому
Ждём видео об остальных хуках
@user-tr8gr6bl2u
@user-tr8gr6bl2u Рік тому
В первом случае что нам мешает добавить count в массив зависимости в useEffect?
@tanercoder1915
@tanercoder1915 Рік тому
Важно также возвращать cleanup callback из useEffect когда есть любые подписки и счётчики.
@goqorhovhannisyan2048
@goqorhovhannisyan2048 Рік тому
Привет Арчаков, пожалуйста, сделайте видео о миксе useContext + useReducer в качестве замены Redux-а.
@Albert-pm6uf
@Albert-pm6uf Рік тому
Можете подсказать как сделать такое же плавное перемещение курсора?
@algum4678
@algum4678 Рік тому
Про usememo с использованием react devtools (как проверять лишние отрисовки) пожалуйста расскажи
@joper3703
@joper3703 Рік тому
Да, давай пожалуйста про useMemo и useCallback
@user-tn1yc1ij8d
@user-tn1yc1ij8d Рік тому
Гоу видосы про useForm и про валидацию
@javascriptov
@javascriptov Рік тому
Гоу видос про useCallback | useMemo
@haibova_irisha
@haibova_irisha Рік тому
Спасибо большое !!! очень крутая подача ) а на boosty ты ессть новый контент ?
@ArchakovBlog
@ArchakovBlog Рік тому
Сначала новый контент выходит там. Это видео появилось в Ютубе через неделю только, поле бусти
@haibova_irisha
@haibova_irisha Рік тому
@@ArchakovBlog спасибо
@arman-6172
@arman-6172 7 місяців тому
18:20 Привет. Что думаешь, если всегда использовать в таком виде: setTask((tasks) => [...task, text]) какие плюсы: 1. Ты всегда работаешь с данными, которые хранит хук 2. Если нужно будет юзать Memo или в useState хранится объект, который нужно менять от других эффектов, то не нужно будет условный tasks прописывать в зависимости эффектов 🤔
@dpoleev
@dpoleev Рік тому
Подскажи, есть ли у тебя что ни будь. где рассказываешь как запустить перерисовку наружних компонентов из внутренних?
@mikalai_root
@mikalai_root Рік тому
Перерендер родителя из потомка? 1. Callback функцией, переданной как пропс. 2. Изменение переменной глобального стэйта приложения ( пример с условным редаксом: в чайлде используешь диспатч и изменяешь переменную, которая используется в родителе.). Наверняка есть ещё какие-нибудь извращённые способы, типо поиска элементов родителя в dom дереве и прямые манипуляции нативным джаваскриптом( всякие append и т.д.)
@lukts7839
@lukts7839 Рік тому
Спасибо за видео. Чнм больше хуков, тем лучше.
@nexakasaki
@nexakasaki Рік тому
Норм, новичкам самое то
@arturmavlidov247
@arturmavlidov247 Рік тому
❤‍🔥
@jamjam3337
@jamjam3337 Рік тому
👏👍
@azizoid
@azizoid Рік тому
А почему в примере с тасками вы не работаете с предыдущими значениями как в первом примере?
@endoscopy8351
@endoscopy8351 Рік тому
А как сделать подсказки в выпадающем списке, как на 20:29?
@killd0z3r
@killd0z3r Рік тому
Подскажите, кто знает как цветовая тема называется? Спасибо тем кто ответит
@serheyjankowsky6899
@serheyjankowsky6899 Рік тому
setState(prev=>), вызывает общий стейт у компонента который ты будешь использовать на одной странице , пример : толерантный с 3 значениями которые ты можешь переключать , создаешь несколько элементов на странице , начинаешь переключать , и воля у тебя во всех компонентах меняется значения , хотя ты в других его не менял , так что нужно быть аккуратным
@kaze9308
@kaze9308 9 місяців тому
так это корректная работа useState ведь. он хранит одно состояние, несмотря на то, что разные компоненты снизу используют его
@NovikovEugene84
@NovikovEugene84 Місяць тому
Ну это прям база
@Santos20004
@Santos20004 16 днів тому
а в самом первом примере если useEffect то почему не просто посадить count массив для отслеживания? и как так завести интервал и не убить его в return прорисовку count вообще вынести за пределы useEffect?
@user-yo7bj9yj3g
@user-yo7bj9yj3g Рік тому
👍
@ryskin82
@ryskin82 Рік тому
Хочешь удалить из списка элемент делай просто filter c нужными условиями
#3: React Hooks - useRef
27:52
Archakov Blog
Переглядів 63 тис.
Não pode Comprar Tudo 5
00:29
DUDU e CAROL
Переглядів 68 млн
Їжа Закарпаття. Великий Гід.
1:00:29
Мiша Кацурiн
Переглядів 461 тис.
ВИРУСНЫЕ ВИДЕО / Мусорка 😂
00:34
Светлый Voiceover
Переглядів 7 млн
React Hooks за 7 минут - Уроки React.js / React хуки
7:04
Лукьянов Артём
Переглядів 30 тис.
Зачем на самом деле нужен хук useCallback
8:33
Михаил Непомнящий
Переглядів 35 тис.
#1: React Hooks - useState
27:47
Archakov Blog
Переглядів 61 тис.
Новые хуки для React 19 и другие фишки
18:01
Михаил Непомнящий
Переглядів 19 тис.
React Query за 10 минут! Быстрый курс
11:34
Archakov Blog
Переглядів 45 тис.
Learn useState In 15 Minutes - React Hooks Explained
15:45
Web Dev Simplified
Переглядів 1,1 млн
#26 Погружаемся в useEffect - ReactJS Полный курс
26:55
Евгений Паромов | Front-end
Переглядів 4,2 тис.
#4: React Hooks - useMemo + React.memo
25:38
Archakov Blog
Переглядів 68 тис.
Não pode Comprar Tudo 5
00:29
DUDU e CAROL
Переглядів 68 млн