Підкорюємо React Context: секрети, приклади та найкращі практики

Поделиться
HTML-код
  • Опубликовано: 25 мар 2024
  • React Context - це механізм для передачі даних через дерево компонентів. Він дозволяє компонентам підписуватися на зміни контексту і автоматично оновлюватися, коли контекстові дані змінюються, без необхідності явного передавання даних через ланцюжок компонентів до кінцевої точки.
    Цей вебінар є глибоким зануренням у світ React Context і призначений для розробників, які бажають поглибити свої знання та навички використання цього інструменту. Вебінар розпочнеться з введення в React Context, де учасники дізнаються про його значення та переваги.
    Далі, ми розберемо базовий приклад використання контексту, що допоможе вам краще зрозуміти його практичне застосування. Буде висвітлено, як React Context працює “під капотом”, що дасть глибше розуміння його механізму дії. Вебінар також охопить розбір найбільшої проблеми контексту, повʼязаної з ре-рендерами застосунку, та способів її уникнення.
    Окрім того, буде представлено патерн publish-subscribe як ефективний спосіб управління станом та альтернативу контексту. Ви навчитеся писати код, який вирішує типові проблеми контексту, та ознайомитеся з хуком useSyncExternalStore для оптимізації роботи із зовнішніми даними. В цілому, вебінар обіцяє бути насиченим та інформативним, надаючи цінні знання та навички для ефективного використання React Context у розробці.
    План вебінару:
    - Що таке React Context і чому вам варто про це знати.
    - Проблеми прокидання пропсів та бібліотек для стейт менеджменту.
    - Розбір базового прикладу з використанням контексту.
    - Як реалізований реакт контекст “під капотом”.
    - Найбільша проблема контексту і як її уникнути.
    - Розбір на прикладі “слабких місць” реакт контексту.
    - Патерн publish-subscribe.
    - Пишемо код з рішеннями проблеми.
    - Хук useSyncExternalStore.

Комментарии • 12

  • @CodeUA
    @CodeUA  18 дней назад

    github.com/iMykhailychenko/react-context

  • @olehkoleh1020
    @olehkoleh1020 Месяц назад +1

    Можно додати лінк на репо з кодом?

    • @user-qs3gl1rj8b
      @user-qs3gl1rj8b 18 дней назад

      Схоже шо мій коментар з посиланням не відображається, я попросив шоб посилання додали в опис, але якшо не хочете чекати то можете знайти мій профіль на гітхабі iMykhailychenko і потім перейти в репозиторій react-context

    • @CodeUA
      @CodeUA  18 дней назад

      Додано в закріпленому коментарі

  • @sashaborduyjan3655
    @sashaborduyjan3655 Месяц назад +1

    Лінк на репо з кодом, пліз!!!

    • @user-qs3gl1rj8b
      @user-qs3gl1rj8b 18 дней назад

      Схоже шо мій коментар з посиланням не відображається, я попросив шоб посилання додали в опис, але якшо не хочете чекати то можете знайти мій профіль на гітхабі iMykhailychenko і потім перейти в репозиторій react-context

    • @CodeUA
      @CodeUA  18 дней назад

      Додано в закріпленому коментарі

  • @innabulatova4138
    @innabulatova4138 28 дней назад +1

    3:45 але ж ви повністю перекрутили те що написано на слайді про слова людини яка була у вас на співбесіді. Отак потім іди на співбесіду щоб тебе так інтерпретували. І якщо подивитись то Редакс був випущений у 2015 а конекст у Реакті 16.3 це кінець 2017 - 2018 рік. То та людина що була на співбесіді - відповіла взагалі то вірно а ви перекрутили

    • @innabulatova4138
      @innabulatova4138 28 дней назад +1

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

    • @user-qs3gl1rj8b
      @user-qs3gl1rj8b 18 дней назад +2

      Схоже що ютуб не пропускає мої коментарі з посиланнями, тому вам доведется шукати все самостійно.
      По-перше, скоріше всього інформацію про контекст в 2017 році ви знайшли з першого посилання в гуглі, але якщо вчитатись в текст то там сказано це реліз оновлення контексту. Для того шоб переконатись, шо контекст був ше до редаксу просто перейдіть в репозиторій реакту, прогляньте код до 2015 року (бо редакс зʼявився в 2015) і знайдіть там папку core/ReactContext.js.
      Потім зробіть те саме для бібліотеки react-redux (не плутати з redux). Знайдіть за допомогою тегів першу версію редаксу v0.1.0 та продивіться код. Там використовується самописний код контексту, приблизно такий як ми робили на занятті, але це через те шо на той момент реакт контекст ше був під бета версією, але попит на нього вже був.
      Щодо "запороли кандидата" то цей приклад був наведений лише як аргумент чому варто розуміти контекст, у даного кандидата було багато інших причин не пройти співбесіду. Ніхто не оцінював людину за знання хронології появи реакт бібліотек, тут скоріше суть в тому, шо кандидат не розуміє як працює передача даних в реакті. До того ж це відноситься до кандидатів рівня middle+, ніхто не вимагає від джуніорів таких знань, шо і було сказано на відео, тому можете не боятись відвідумати співбесіди

    • @innabulatova4138
      @innabulatova4138 18 дней назад

      @@user-qs3gl1rj8b Дякую за вашу відповідь. Бо я дійсно перейшла за першими посиланням і мені б і на думку не спало б шукати щось за якимись тегами.
      На співбесіду все рівно важко йти. Я навчаюсь за англійським контентом і там все так nice and peachy а коли пробувала просто на стажування тести пройти то мозг виносять так що жесть... тому в мене по сприйняттю якась прірва між тим що я вчу і що питають. То коли я бачу питання до кандитати та відповідь - в мене завжди "захисна" реакція справбовує. Не дай боже мене б таке спитали - розвернулася б і вийшла.