Контекст в React: хук useContext и избавление от prop drilling

Аватар автора
Александр Ламков — Friendly Frontend
✏️ Избавимся от prop drilling и сделаем код To Do List проще и чище. Разберёмся, что такое контекст в React и зачем он нужен. Подключим хук useContext и начнём передавать задачи и обработчики напрямую, без цепочки пропсов. Объясню, как создавать провайдер, что передавать в value и как использовать контекст внутри вложенных компонентов. Аккуратно перенесём весь state и логику в обёртку TasksProvider, а App.jsx оставим максимально лаконичным. Также вынесем TasksContext в отдельный файл, чтобы структура проекта стала ближе к настоящим продакшн-проектам. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:41 | Что такое prop drilling ▶ 02:20 | Context API и хук useContext ▶ 12:32 | Выносим логику из Todo.jsx в компонент TasksContext ▶ 18:40 | Плюсы и минусы подхода ▶ 20:12 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs

0/0


0/0

0/0

0/0