7 Ошибок useState и useEffect, которые все еще совершают Junior React разработчики

Мы в соц сетях:

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

Научиться правильно их использовать — ключевой момент на пути к становлению опытного разработчика.

Тайм-коды:
00:00 - О чем мы поговорим
00:17 - Fetch и useEffect что может пойти не так?
04:22 - Лишний useEffect
07:01 - useState не обновляет?
09:40 - Ставим хуки правильно и избавляемся от return
13:30 - Обновляем значение в объекте
17:13 - Один useState для большой формы
21:56 - useState есть нюанс

Мы не только обсудим, что именно идет не так, но и почему это важно для производительности и поддерживаемости твоих проектов. От неправильного понимания зависимостей в useEffect до заблуждений относительно работы useState — я поделюсь советами и лайфхаками, как избежать этих ошибок и сделать твой код чище и эффективнее.

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

[jmlzqhm]

Отличная подача материала! Спасибо за вашу работу!)

[flejik_magic]

"Сейчас этот компонент должен зарендериться" - он же, агрессивно нажимает на мышку

[vuezgcl]

Надо работать в полном колхозе без линтера и библиотек форм чтобы дойти до таких ошибок.

[megabulk]

14:55 а как у него вообще форма работает если он в поле не указал атрибут value?

[zomvtco]

Сделайте уже что-то годное про Angular

[SuvStreet]

В последнем примере, то что происходит ре рендер на нажатие кнопки, можно оставить, или тоже лучше по фиксить и ссылаться на данные объекта?

[cybersystem]

Первые две проблемы настолько простые, что я после правильного ответа на них начал искать подвох в вопросе и все ждал, когда же ты предложишь "правильно" решение 🤣 Причем вторую проблему с корзиной я даже не понял сначала. Ну настолько оно просто и решается подсознательно, что я даже не въехал че происходит.
Третий момент с юзэффектами и ифами. А если у меня return как раз и должен прерывать выполнение отрисовки, как у тебя. Ну нет ID - зачем мне дальше что-то делать? Или я опять не понял в чем "проблема". Просто я так делаю уже много лет и проблем НОЛЬ! Просто в этом и смысл: если ничего нет - то и все. Документации и ребятам из реакт тоже не следует прям верить и молиться на них. Они такие же разрабы и бывают не очень умненькие ))) Например, у них в юзэффект вызывается при маунте компонента сразу анмаунт и потом снова маунт и они это считают ок. А я вото например считаю, что нифига это не ок.

Далее, пример с объектами. Сам наступаешь на грабли из примера с каунтами. Зачем же ты ориентируешься на поле user? Как раз нужно юзать колбэк в этом месте и делать распаковку актуального prevObject. Получается сам же наступил на грабли джуна 🤣

Потом, пример с формами. Как раз иногда лучше пиу-пиу-пиу, чем предложенный тобой вариант! Бывают случаи, когда тебе нужна реакция на конкретное поле. Кто не сильно шарит - передаст в зависимости ВЕСЬ объект form вместо конкретного поля (ну вот как в последнем примере, собсно). Кроме того, если у тебя будет большая вложенность в таких объектах - можешь хлебнуть из-за ссылочного типа. И как можно видеть, у тебя при каждом чихе в КАЖДОМ поле срабатывает спред оператор. Т.е. по сути ты на каждый чих гоняешь цикл по ключам объекта. Зачем?
Ну и самый важный вопрос: зачем по твоему разрабы реакта ушли от классов и классического вида стейта, который был объект? 🤣 Т.е. ты ведь просто возвращаешь стейт к тому виду, в котором разрабы его выпилили из либы, раздробив спецом.