Не делай такое с useState! Топ 5 ошибок junior React-разработчика
Vložit
- čas přidán 6. 06. 2024
- Часто начинающие 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 #реакт #разработка
Я перерыл много обучающих видео на youtube включая англоязычные, но твоя подача контента и умение объяснять превосходят всё и вся. Спасибо большое)
мне кажется ты просто плохо ищешь)) Многие штуки он берет как раз из зарубежного ютуба.
@@user-wl2xp8yo6x Привет. Можешь порекомендовать зарубежных ютуберов по реакту?
нигде не обходится без льстецов!
Если объяснить весь ролик коротко, то вот:
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?))
а почему именно splice, а не скажем .filter ? )
@@kawaikaino5277 я лично выбрал splice, чтобы проще делать отладку, в случае чего-то. Кнч, можно сделать что-то такое:
1. const formedTasks = state.filter(...)
2. return formedTasks
Но также, в splice ты можешь начать с индекса таски, которую тебе нужно удалить, а не идти по целому списку. Как бы да, ты используешь проход по массиву, так как и filter, но в конкретном случае, как я понимаю, splice начинает с определённого индекса массива и затем уже делает те действия, которые нам нужны. По поводу "проход по массиву", я начал разъяснять так, как примерно работает под капотом
Если в чём-то не прав, поправьте меня пожалуйста))
@@GroundGamer По поводу, прохода по всему массиву, при использовании filter.
а. В большинстве случаев, это экономия на муравьях, т.к чаще всего не приходится работать с длинными массивами
б. Ну уж, если пришлось обработать длинный, на сколько мне известно движок под капотом оптимизирует выполнение filter (но это не точно)
Спасибо за ответ
@@GroundGamer зачем здесь переменная formedTasks? filter иммутабелен, можно сразу делать return state.filter(...)
@@lirrr6555 Можно, конечно. В целом, хоть однострочные решения и "красивы", но иногда, они сложны для отладки, допустим когда у нас в фильтре (или ещё в каком либо методе массива), содержится ещё один массив по которому нам нужно пройтись, и вся их "красота" перестаёт быть "красотой" и превращается в "чудовище", которое ещё бывает сложно прочитать разрабу. Поэтому, я выбрал для себя такое написание переменных, как за основу
Огромная благодарность за такое видео про особенности useState! Будем ждать про другие хуки в том же формате!
Спасибо за работу, любое обучающее видео от вас интересно, тем более такого формата. Интересен ещё useEffect с его побочками и проблемами.
Очень все понятно и доступно, спасибо тебе за такой классный материал 👍 Таких очень мало, кто может объяснить так доходчиво и просто
Отличный контент! Продолжайте, мы ждём!
Ты невероятно круто объясняешь!!! Запиши видео по всем основным хукам, это будет супер
Спасибо за урок! Очень грамотно объясняете материал и к тому же в таких тонкостях. Для меня как новичка - это просто бесценная информация! Успехов Вам!
Отличный ролик, полезная инфа!) Ждем еще
Спасибо, полезная информация, как и сама рубрика разбора типичных и не только ошибок)
Все что ты делаешь, все интересно. Продолжай в том же духе!
Замечательный видеоролик! Благодарю за Ваш труд! Успехов! 😊👍
Спасибо большое за такие видео. Просто не представляешь как твой мини-урок помог мне с задачей. Могу скрин потом выслать))) захотелось даже статью а блоге написать)
Плакать от счастья хочется. Очень актуально🥲Спасибо огромное❤❤❤❤❤
Интересно! Давай еще! Спасибо!)
Классно!
Хотелось бы про useEffect как продолжение ну и про остальные тоже. 😀
Очень интересно! Буду ждать видео и для других хуков :)
это ровно то что я искал! жаль что только один хук был описан, жду еще подобных видео, лайк, подписка
Как всегда красавчик, всё по полочкам!
уже заждались новые видео!
Спасибо! очень классно объясняешь! Продолжай в том же духе и будет зашибись. ))
Очень интересно даже того, кто не знает реакт, но знает js! Давай ещё!))
Очень полезное видео, спасибо! Я, как начинающий , не все смог переварить,. но от половины видео есть реальная польза! :)
Продолжай!Спасибо тебе за объяснения!
Спасибо, очень полезно разработчикам любого уровня. С массивами сам в свое время долго мучался и не мог понять.
Неплохие советы) Лайк!
Классный ролик, много для себя подчеркнул.
Хорошее обобщающее видео. Думаю будет интересно увидеть нечто подобное о пропсах.
спасибо большое! Вот тебе комментарий, хотелось бы больше таких видео по реакту!
Арчаков, большое спасибо!
Лайк поставлен , комментарий соответственно 🌚🫡
Очень круто! Спасибо!
Спасибо большое, благодаря данному видео я теперь не допускаю подобных ошибок!🙏
Спасибо большое! Теперь я понял как это работает)
Как для начинающего разработчика, очень полезное видео, Спасибо !
Очень очень классный ролик. Да и вообще канал крутой. Спасибо за Реакт-пиццу
Спасибо. Стала понятна 2 глава документации React
Супер спасибо!!! Если так разберать все топовые хуки, то будет агонь, агнинский!!!
Огонь! 🔥
Очень полезный видос! Жалко что не посмотрел его пару недель назад, сэкономил бы кучу своего времени. (к решению пришел сам, перепробовав кучу вариантов и вникнув в суть самой проблемы мутации массивов. Но времени затратил на это немеряно.)
молодец, что сам нашёл 👍 в идеале, нужно стараться сначала самому находить решения любым возможным способом и только потом искать его в подобных роликах и других готовых решениях
@@ArchakovBlog а какая у тебя клавиатура?
Ухты, спасибо большое. Столько времени сидел и не понимал, почему меняю state объекта, а ничего не рендерится. Как больно быть новичком в чем-то )
действительно полезное видео. спасибо
Супер контент !!
Максимально понятно и доходчиво
Пишу лайк, ставлю комментарий и показываю что мне интересно )
Да, давай ещё эту рубрику
Благодарю, неплохо помог
Круто. Давай про другие хуки. С более конкретными примерами использование
Отличное видео
Денис ждем новый интенсив по Next.js + TypeScript, оч хотим((
Начиная с 10-й минуты, по поводу undefined в users: как-то немного замудренно объяснял) Просто должно быть понимание, что useEffect отрабатывает только ПОСЛЕ рендера компонента. Поэтому и undefined, потому что при рендере useEffect ещё не отработал, а начнет свое выполнение только после отрисовки разметки и уже тогда из-за setUsers произойдет ре-рендер и мы увидим наших пользователей.
То есть людям нужно донести именно базовое понимание того, почему мы undefined сначала получаем, иначе никто так и не поймет ничего
А так за видос респект, прошел по основным "грубым" ошибкам!:)
Для понимания надо сначала на этом же канале посмотреть очень понятное видео о useEffect
очень интересно!
расскажи пожалуйста про использование хука useLayoutEffect
Привет) спасибо за видео! а когда будет про (не используй везде useCallback и memo) ?
Будут ли еще видео по React Native? Жду с нетерпением
Збс, продолжай!
Будет полезной инфа про основные хуки и их работу под капотом, а так же их стоимость выполнения, это поможет лучше понимать когда стоит их применять.
спасибо! хорошо всё.
Бро, продолжай пожалуйста!!!
Ролик и интересный и полезный! Сделай пожалуйста по остальным хукам!
Топ тема, делай больше таких видео, я как раз изучаю реакт, и был вопрос как лучше все это использовать нельзя же все хуки использовать на абум
Спасибо!
Доброе утро! Про useLayoutEffect() было бы суперкруто :)
Благодарю за видео и вообще контент, очень полезный! Лично мне было бы интересно посмотреть как писать CSR приложение на React, с db на postgres, sequelize-cli, сервер на express, webpack, регистрация-авторизация на JWT(c access token и refresh token), bcrypt, модалки, мультеры(загрузка-выгрузка файлов) и конечно как писать endpoints api и render на бек, всё связывать и защищать. Мне думается что задача сложна для начинающего фулстека, поднять сервак, и на хуках параллельно связывать фронт и бэк. Книжный клуб например. А вообще хотел узнать что за тема в VSCODE??? =))))
Гоу видос про useCallback | useMemo
Будут ли новые полные курсы (на несколько видосов)? Если да, то будут ли для premiddle/middle и как скоро?
Очень ждем новые видео
юзколбек и юзмемо ошибки ждем) и хотелось бы больше по тулкиту инфы и парочку мнений на счет актуальности стека через обычный редакс и классы, не приведет ли это к потери актуальности на рынке через пару лет такой работы, при активном развитии тулкита и функциональных комп.
есть ли смысл ломать голову в коде на классах в 23-24 годах?
так же хотелось бы услышать мнение о TS, очень многие его нахваливают, но я слышал мнение от очень крутых разрабов, что тс нужен только если ты изначально пишешь хреновый код ибо слабые разрабы хейтят не строгую типизацию, а потом скилапнувшись наоборот восхваляют возможности динамической типизации... как то так
Расскажи по возможности, пожалуйста про все костыли useCallback() & useEffect()
привет еще раз ! знаю сейчас не луяшое время , но нету ли в планах сделать какой-то малеьний проект используя react , redux , rtk query , ts ? спасибо
Спасибо за крутотень
Хочу больше роликов про best practices
Топи топи интересно же и залипательно
Ждём видео об остальных хуках
Теперь понятно что такое мутация объекта.
Спасибо за некоторые интересные моменты.
Маленький вопросик: а почему setInterval не убили в ретерне юзэффекта?
Спасибо за видео! Скажи, плиз, почему в случае с работой с массивами опять не воспользоваться функцией и не написать setState(prev => [...prev, newTask])?
Привет , ,с Новым годом ! а можно более подробно о мутациях ? Как правильно использовать с redux toolkit , спасибо
Гоу видосы про useForm и про валидацию
Формат отличный
Можете подсказать как сделать такое же плавное перемещение курсора?
Да, давай пожалуйста про useMemo и useCallback
В первом случае что нам мешает добавить count в массив зависимости в useEffect?
А почему в примере с тасками вы не работаете с предыдущими значениями как в первом примере?
Привет Арчаков, пожалуйста, сделайте видео о миксе useContext + useReducer в качестве замены Redux-а.
👏👍
❤🔥
Подскажи, есть ли у тебя что ни будь. где рассказываешь как запустить перерисовку наружних компонентов из внутренних?
Перерендер родителя из потомка?
1. Callback функцией, переданной как пропс.
2. Изменение переменной глобального стэйта приложения ( пример с условным редаксом: в чайлде используешь диспатч и изменяешь переменную, которая используется в родителе.). Наверняка есть ещё какие-нибудь извращённые способы, типо поиска элементов родителя в dom дереве и прямые манипуляции нативным джаваскриптом( всякие append и т.д.)
Спасибо за видео. Чнм больше хуков, тем лучше.
Важно также возвращать cleanup callback из useEffect когда есть любые подписки и счётчики.
Спасибо большое !!! очень крутая подача ) а на boosty ты ессть новый контент ?
Сначала новый контент выходит там. Это видео появилось в Ютубе через неделю только, поле бусти
@@ArchakovBlog
спасибо
👍
А как сделать подсказки в выпадающем списке, как на 20:29?
Про usememo с использованием react devtools (как проверять лишние отрисовки) пожалуйста расскажи
Норм, новичкам самое то
Кайф
18:20
Привет.
Что думаешь, если всегда использовать в таком виде:
setTask((tasks) => [...task, text])
какие плюсы:
1. Ты всегда работаешь с данными, которые хранит хук
2. Если нужно будет юзать Memo или в useState хранится объект, который нужно менять от других эффектов, то не нужно будет условный tasks прописывать в зависимости эффектов
🤔
Подскажите, кто знает как цветовая тема называется? Спасибо тем кто ответит
Ну это прям база
а в самом первом примере если useEffect то почему не просто посадить count массив для отслеживания? и как так завести интервал и не убить его в return прорисовку count вообще вынести за пределы useEffect?
Когда будет next pizza?)