Не делайте так в React!

Посмотрим на частые ошибки новичков при использовании React и как их избежать.

🔗 Ссылки:
💬 Telegram канал с полезными советами:

Разделы видео:
0:00 - Введение
0:17 - Типизация Props (TypeScript)
2:35 - forwardRef
5:53 - Ошибка useState
8:40 - setState с объектом
11:50 - Использование hooks
14:01 - Заключение

[PurpleSchool]

🔗 Ссылки:
💬 Telegram канал с полезными советами:

[WinchesterD]

Спасибо, про расширение интерфейса и затем деструктуризацию пропса в инпут вообще пушка.

[АлександрКасатов]

Видео в целом полезное) Но по поводу последнего пункта я бы добавил еще, что если isAuthed вычисляется не в самом компоненте, а приходит в пропсах (как в вашем примере), то проще и нагляднее сделать условный рендеринг этого компонента в родителе, и пропс isAuthed нам не понадобится вовсе.

[alexeybakushev]

Вот хороший материал! Понятный и полезный не только самым начинающим. До сих пор встречаются люди, что пренебрегают правильной типизацией при написании React-компонентов. Побольше бы таких видео в интернетах. Рекомендую.

[WorldCount]

Ой как этой информации не хватало, когда только начинал. Спасибо за труд.

[xxcrypt]

брал у тебя немного курсов по докеру и ноде, вроде норм

[snatvb]

1 - про пропсы просто крик души, согласен с тобой полностью, ток лучше type вместе interface юзать, ибо мы на большом проекте похавали за счет merging declaration :)
2 - про форвард реф еще один плюс в карму
про мутации по моему это база, в каждом утюге это есть)
для новичков оч полезное видео, а первые два пункта и мидлам как мантру надо показывать

[DonExCode]

Хорошая подборка. Когда только начинал работать с реактом, условные выражения ставил выше хуков и в какой-то момент начали происходить проблемы с отображением компонентов.
Антон, подскажите пожалуйста. Какой фреймворк для React лучше подойдет, для реализации PWA, с учетом того, что клиент имеет нестабильное сетевое подключение?
Видя, что Next движется в SSR, возник вопрос, будет ли дальнейшая поддержка Page Router. В специфичных задачах, как у меня, не всегда подходит SSR. Иногда необходимо, чтобы приложение локально хранило информацию и потом выполнялась синхронизация.

[LRXAORLOV]

Чтобы не писать такой дженерик с HtmlAttrs и тд можно использовать другой) ComponentProps<„input“> )

[TheMrDrell]

Антон спасибо за видео. Первый же момент с типизацией помог исправить ошибку в компоненте инпута моего пет проекта. Я как раз сделал свой интерфейс, а оно вон как можно было.
И еще вопрос. Может кто подскажет. Как можно лучше использовать Zustand и React-Query. Я новичок. Делаю свой пет-проект учебный. Решил попрактиковать данные технологии. Увидел или услышал уже не помню где, что вроде они хорошо в связке работают. Вот сижу думаю с точки зрения правильности архитектуры или порядка как лучше их вместе использовать. React-Query тут понятно для асинхронных запросов. Вот запросил я к примеру массив тудушки - а дальше их как то в созданный массив store zustanda на хранение отправлять? Так то мы же можем вызвать useQuery в любом месте в приложении. Есть ли какие то рекомендации на этот счет по их совместному использованию? Допустим асинхронные запросы через React-Query, а что тогда на zustand остается?

[TheLazarev]

Мне очень нравится что вы делаете. После ваших роликов иду рефакторить свои проекты всегда. Теперь столкнулся с проблемой и вот интересно было бы узнать как это правильно делать. Вот например таблица обновляет данные по сокету каждые 100мс, а в ячейке есть состояние поп апа. И вот при каждом рендере он сбрасывается.

[romanryaboshtan]

5:18 это будет работать и без ForwardRef. Не es6 синтаксис(ключевое слово function)

[АлексейСоколов-ук]

Антон спасибо за ролик! А как быть, если например форма на 200 полей ввода?
Делать один стейт на все(объект) или на каждый инпут стейт или через рефы?

[STELLS]

Я уже не оч новичок, но все равно посмотреть было полезно. 🙏🏻💪🏻

[ivanminyaev]

Антон, подскажите пожалуйста: во многих ваших видео, можно заметить что, при работе в IDE VSCode, в тот момент, когда вы печатаете (например вызов метода), у вас появляются всплывающие окна, которые подсказывают: какие параметры принимает этот метод и какого типа данные. Как мне сделать так-же ?

[STELLS]

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

[cdeblog]

Как-то не хорошо постоянно пересоздавать объект для состояния. Нет более красивого варианта пнуть ререндер?

[kimanowka]

А можно практики поинтереснее для более опытных?) а то такое чувство, что все одни и те же практики записывают) solid для реакта на практике с реальными компонентами было бы круто посмотреть)

[DubinArtur]

Очень не люблю forwardRef, он очень контринтуитивный, как будто чужеродный и совсем не из реакта

[stanislav_ovv]

Музыка практически как у Пивоварова в новостной повестке.