Найкращий спосіб писати чистий код в React з хуком useImperativeHandle

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 พ.ย. 2024

ความคิดเห็น • 26

  • @vitaliipolushkin834
    @vitaliipolushkin834 หลายเดือนก่อน +4

    Спасибо мужик

  • @ShineVi
    @ShineVi หลายเดือนก่อน +2

    Підписався на ваш канал! Дякую за якісний контент українською мовою!

  • @AndriyMk18
    @AndriyMk18 หลายเดือนก่อน +3

    Дякую за такий чудовий контент, попалось відео в стрічці ютубу насправді українською такого лічені одиниці тому, я зрадістю підписався та вліпив лайк. Очікую нових відео, бажано кожного дня.

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน +1

      Дякую, дуже приємно 😊 кожного дня хотілося б, але є теж інші обов'язки в житті 😄 буду намагатись хоч 2 на тиждень

  • @ops_rv
    @ops_rv หลายเดือนก่อน +1

    Дякую
    Супер, треба тільки інший приклад не з формами.

  • @Wentris71
    @Wentris71 หลายเดือนก่อน +4

    1. Uncontrolled input flow - нерекомендований паттерн роботи з формами
    2. Over-engineering - все що було зроблено через external ref - могло/мало бути реалізовано через пропси, або через один реф.
    Не вводьте джунів у оману 😂

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน +2

      Дякую за ваш коментар 😊 погоджуюсь з тим, що ви написали. Але мета відео була в іншому - показати на відносно простому прикладі, як працює useImperativeHandle.
      А що до uncontrolled form - ніби не рекомендований, але така дуже популярна бібліотека, як React Hook Form, наскільки пам'ятаю, використовує саме його. Чому? Бо дуже сильно знижується кількість ре-рендерів компоненту.

    • @Wentris71
      @Wentris71 หลายเดือนก่อน +1

      @@SimpleFrontendUA я гадаю що процес навчання це 50% - розказати що таке молоток, і 50% - які бувають цвяхи. Якщо вчити молотка на шурупах - це погано побудований освітній процес, а потім приходять джуни на проект і треба їх перевчати.
      Я розумію що сегмент укр ютубу для IT ще дуже слабенький, але це конструктивна критика, врахувавши яку - можна підвищити рівень контенту.
      Чи ви гадаєте що не можна було це показати на прикладі двох семантично-нейтральних компонентів?)

    • @Wentris71
      @Wentris71 หลายเดือนก่อน +1

      А так те що ви робите - респект!

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน +1

      Так, розумію. Є багато аспектів, які треба врахувати при створенні цих прикладів.. За конструктивну критику дуже дякую 😊 Це те, що як раз мені потрібно, бо створюючи контент, я сам вчуся :) вчити - це все ж таки не працювати над проектом, зовсім інша специфіка. Додам ремарки на тему форми до опису відео.

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน +1

      Дуже дякую 😊🙏🇺🇦

  • @Mahonee89
    @Mahonee89 หลายเดือนก่อน +3

    А якщо не додавати функцію, а тільки оновити інтерфейс

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน

      Не зовсім зрозумів питання :)

    • @Mahonee89
      @Mahonee89 หลายเดือนก่อน +1

      @@SimpleFrontendUA по ідеї, типізація інтерфейсу показує можливі методи для виклику. Як буде виглядати помилка і чи виникне вона, якщо фактично функції не буде, але вона буде описана в інтерфейсі? Чи буде пропонуватися функція в батьківському компоненті, навіть якщо вона не існує, але описана в інтерфейсі?

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน +2

      А, тепер зрозуміло. Ну дивіться, тип нашого компоненту CustomInput має співпадати з тим, які функції він фактично має. Можете спробувати додати нову функцію в типі, а в реалізації ні - тоді TS видасть помилку, що типи не співпадають. Звісно можна було б не окреслювати цього типу, але для цього ми і використовуємо TS 🙃 тоді ці невідповідності випливають на етапі компіляції, а не тихо чекають, поки користувач натисне на кнопку з функцією, якої немає :)

  • @bjol_Dg
    @bjol_Dg หลายเดือนก่อน +4

    Ок, а якщо без TS, то як воно буде працювати ? ми ж в App в useRef передаємо типи

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน +2

      Гарне питання 👍 в JS все буде працювати так само, тільки не бути попередження про те, що CustomInput не має такої функції. В такому випадку, якщо писати код без ESLint, скоріш за все при спробі викликати неіснуючу функцію, ми отримаємо посилку, що setValue is not a function. А якщо ESLint налаштований добре, то він може про це попередити ще в IDE, шо такої функції там немає. Різниця з TS в тому, що він не скомпілюється і покаже, де помилка. А JS буде виконуватись, поки ви не натиснете на кнопку, яка викликає неіснуючу функцію.

    • @bjol_Dg
      @bjol_Dg หลายเดือนก่อน +1

      @@SimpleFrontendUA Дякую, користна інфа, цікавий контент 🦾

    • @SimpleFrontendUA
      @SimpleFrontendUA  หลายเดือนก่อน

      Дякую 😊🙏