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

[@user-sq3jy1cx8x]

Как намучился с этим счетчиком, пытаясь сделать все самому. Даже GPT мучал, посмотрев этот видос, наконец догнал. Спасибо за подробное и понятное пояснение.

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

[@ВладОся-з7ь]

обезательно нужно , получаю удовольсвия понимая то что раньше не знал

[@serjmarkelov9915]

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

[@ТёмаКоролёв-к6ф]

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

[@connectw]

@@ТёмаКоролёв-к6ф Привет. Можешь порекомендовать зарубежных ютуберов по реакту?

[@TonyPony7]

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

[@ArtDen100]

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

[@abikideas]

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

[@ИгорьНово]

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

[@rustamakhmetyanov4404]

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

[@Zubairavvv]

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

[@Sergey-vh3vj]

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

[@vladfolk2418]

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

[@daniil__kryuchkov]

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

[@unknown.6914]

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

[@stellarlay517]

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

[@2Extremum]

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

[@hello-gq4yi]

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

[@nafisgarifullin7199]

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

[@alexanderkomanov4151]

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

[@Мария-ц8ъ2е]

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

[@Soap9613]

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

[@T800Cyberdine]

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

[@ArchakovBlog]

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

[@AmericanDragon134]

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

[@kspshnik]

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

[@LavandaKicK]

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

[@VolodymyrSirenko]

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

[@Елена-б6в3ж]

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

[@murrmax1466]

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

[@БауржанКадискалиев]

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

[@dmitriykarabasov1440]

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

[@jimsaharov]

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

[@roshin-1]

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

[@kentavr16]

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

[@РусланБогданов-ы8е]

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

[@ИгорьБабиков-б6щ]

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

[@maronwilsons]

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

[@АлександрСосо-щ1б]

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

[@ihor7307]

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

[@НиколайОхотников-ф9х]

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

[@dmitrylem7703]

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

[@unknownWakeborder]

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

[@andreyh6934]

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

[@____Olga__]

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

[@yauheniramankou5491]

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

[@galichandreyschool]

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

[@javascriptov]

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

[@Oleg_Artemov]

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

[@yoerh]

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

[@black_light]

Спасибо. Помог решить проблему.

[@РусланСабитов-и2ь]

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

[@ivankprod]

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

[@vansowboy]

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

[@Imperfectwow]

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

[@SeverHolod]

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

[@ДенисАгейчев]

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

[@Айбек-г3е]

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

[@YuliyaAnts]

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

[@mikalai_root]

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

[@ИванФамилия-ю5и]

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

[@haibova_irisha]

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

[@ArchakovBlog]

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

[@haibova_irisha]

@@ArchakovBlog спасибо

[@Алексей-о3т1щ]

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

[@Вадим777-б9я]

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

[@alekseyberezov8020]

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

[@erzhan225]

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

[@haibova_irisha]

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

[@Boobnovslava]

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

[@slever17]

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

[@slavikvasin9095]

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

[@Отдайкирку-б7й]

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

[@andreikrashas7155]

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

[@tanercoder1915]

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

[@-rk]

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

[@MaximSeleznev]

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

[@АндрейПоляков-е5н]

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

[@saperovtop]

Огонь! 🔥

[@АндрейРосовский]

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

[@arman-6172]

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

[@samiroutka]

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

[@joper3703]

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

[@lukts7839]

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

[@stanislavsapogov9268]

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

[@proletarian]

так я опытный оказывается, не знал

[@nexakasaki]

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

[@НикитаРудаков-з2е]

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

[@Grigoren_com]

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

[@serheyjankowsky6899]

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

[@kaze9308]

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

[@raff_m_d6971]

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

[@azizoid]

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

[@ЕвгенийШут-о7н]

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

[@ryskin82]

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

[@vladimirv787]

Спасибо!

[@АнзорБаматалиев]

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

[@borisenkoff_]

тут видеоролик затащил только Гена Горин в конце )

[@Daemond15]

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

[@deceser8057]

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

[@haibova_irisha]

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

[@NovikovEugene84]

Ну это прям база

[@jamjam3337]

👏👍

[@Santos20004]

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

[@ДенисСофієнко]

👍

[@dpoleev]

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

[@mikalai_root]

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

[@Albert-pm6uf]

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

[@РусланСабитов-и2ь]

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