Типичные ошибки новичков в React JS. useState, useEffect, props drilling и useContext

Рассмотрим типичные ошибки которые встречаются в проектах у начинающих React JS разработчиков. Как правильно изменять состояние в компоненте используя useState. Почему стоит быть аккуратным с вызовом useEffect и изменением состояния компонента внутри него. Что такое props drilling и как от него избавиться с помощью использования createContext и useContext.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм-коды:

00:00 Введение
00:27 Хук useState
06:40 Хук useEffect
10:12 Props drilling и хук useContext
15:54 Полезная информация ;-)

[crn]

4я ошибка, использовать alert вместо console.log

[betsmagazine-]

Спасибо! К стыду, про useContext первый раз услышал, прокидывал пропсы "бурением")) ну а useState, useEffect используем методом тыка)

[olgabaeva]

Для тех кто уже знает JavaScript, не планируете ли вы сделать курс только по React (со всеми хуками) ?

[vladimirplyukhin]

Кстати, сделал Provider, чтобы избежать props drilling в практикуме по Корзине товаров на React
Спасибо, теперь только дошло что это такое

[ijukzoe]

Скажите пожалуйста будет ли курс react на канале?

[MadMax-ksum]

Можно не {{ text: text }}, а {{ text }}

[danber]

Привет! Очень хотел бы получить файлик с настройками твоего вс кода, заранее благодарен !

[aralbaev]

так как же менять этот значение который нам так нужен?

[ChordoflifeS]

А как в функции где изменяешь Стейт вызвать алерт с текущим значение стейта? Без юзэффект

[vitekvk]

А если в контекст провайдер нужно передать несколько значений? Как это будет выглядеть?