Ось ще один приклад з життя (максимально спрощений)

🗒 Маємо компонент який тримає в собі стейт моделі і керує діалогом з формою. Модель виконана у вигляді масиву об'єктів із value в середині, методу оновлення стейту немає взагалі.

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [fields] = useState([{ value: "test" }]);
  const closeDialog = () => setIsOpen(false);
  const openDialog = () => setIsOpen(true);

  return (
    <>
      <button onClick={openDialog}>Open edit dialog</button>
      <dialog open={isOpen}>
        <Form initialFields={fields} onCancel={closeDialog} />
      </dialog>
    </>
  );
}

🗒 Маємо другий компонент - форму, яка, приймає початкові дані і тримає їх у власному, окремому, стейті. На формі є кнопка з типом reset, яка при натисканні очищує форму та закриває діалог.

function Form({ initialFields, onCancel }) {
  const [fields, setFields] = useState(initialFields);
  const setField = (e, field) => {
    field.value = e.target.value;
    setFields([...fields]);
  };
  return (
    <form>
      {fields.map((field, i) => (
        <input key={i} value={field.value} onChange={(e) => setField(e, field)} />
      ))}
      <button type="reset" onClick={onCancel}>
        Cancel
      </button>
    </form>
  );
}

Проблема (вибачте, виклик!) полягає в тому, що, якщо ви відредагуєте поле і закриєте форму, а потім її знову відкриєте, то побачити внесені зміни. Незважаючи на reset і не зважаючи що метод setFields батьківскього компоненту взагалі не існує.

❓В задачі питається: де баг і що треба зробити з розробником цієї диверсії ❓

П.С. Дякую пану Ярославу за наведений приклад.

Відповідь на попередню задачу

Попередній приклад є React версією дуже популярного на співбесіді питання, в якому початківці бувають помиляються:

const a = { v:1 };
const b = a;
b.v = 0;
console.log(a.v); // ????

❓Подумайте хвильку, що буде в консолі?

А в моєму прикладі все те саме, лише загорнуте в React. Тож давайте цей приклад розберемо

1️⃣ Під час першого рендеру, ми викликаємо App і передаємо в стейт масив об'єктів, а потім, одразу ж, отримаємо цей масив назад і записуємо в константу fields.

2️⃣ Після цього викликається компонент Form який отримує посилання на той самий масив через пропс і кладе отримане посилання собі в стейт. Зверніть увагу, що і в App, і в Form ми маємо один і той самий масив з тими самими об'єктами.

3️⃣ Після зміни інпуту, викликається метод SetField, який записує значення в поле value об'єкту. Потім створюється новий масив, який записується в стейт Form. Але цей новий масив все ще містить ті самі об'єкти які він отримав від компоненту App. Тому, змінюючи їх в одному місці, вони змінюються усюди.

😊От і вся магія, як бачите нічого складного. Саме тому, доречі, я рекомендую спочатку гарно розібрати JS, а потім вже переходити до React, а не навпаки.

🔨 Шляхів вирішити цю ідею - багато. Наприклад не мутувати стейт, про що книжка пише з самого початку. Або, передавати в форму клони за допомогою structuredClone або JSON.stringify/JSON.parse.

❗️Головне те, щоб ви розуміли що відбувається і чому. І тоді вирішення проблеми знайти буде геть не складно. Ще й співбесіду буде проходити легше)

Бережіть себе, допомагайте ЗСУ, скоро побачимось!

Мені просто немає що сказати 😢

Руки не працюють. Голова не думає. Єдине що спадає на думку - всі наші пожертви були не дарма.

І так, їх ще буде потрібно багато. Але шлях у нас один. До їх кінця. До нашої перемоги.

Готуйтесь, гуртуйтесь, заробляйте, допомагайте, не опускайте руки.

Не забувайте.

🎙Анонс нового ефіру🎙

Пан Сергій запросив мене до себе на канал поговорити про... мене???

😎 Що з того вийде я не знаю, але кому цікаво трохи зі мною познайомитись, послухати трохи про наші курси, про те чим я займаюся окрім роботи і дізнатися чому ж я більше не стрибаю з парашутом - приходьте в суботу на 19:00.

🍺 Точно буде не напряжно, трохи гумора і можливо трохи матюків, якщо кішка Сергія не повернеться до норми до суботи 🐈.

Всіх запрошую ❤️

😮‍💨 Хлопці з Create-React-App втомилися і більше не рекомендують його для нових проектів😮‍💨

❗️Реакт випустив нову документацію (доречі, класна), в якій зазначив, що:

> ... ми рекомендуємо вибрати один із фреймворків на основі React, популярних у спільноті

🦣 Окремо Ден Абрамов зазначив, що команда планує перетворити його (CRA, а не Абрамова) на ланчер, який буде пропонувати відібрані фреймворки і стартувати проект вже на них.

👉 Для нас це значить наступне:

1️⃣ Якщо нам треба щось, що швидко збирається і не дуже складне - беремо Vite (npm create vite)

2️⃣ Якщо в нас забаганки як в Шамаханьского царя, (тобто потрібна глибока і гнучка кастомізація) - беремо webpack, який хоч і повільніший, але має дуже гарну інфраструктуру.

❗️В незалежності від обраного пункту починаємо вчити Next.JS. Можливо навіть доведеться зробити по ньому декілька відео.

П.М. А ще я випадково знайшов пост де команда, яка фактично відродила JSX не рекомендує до використання файли з цим розширенням 🤭

Всіх чекаю в суботу!

Наразі Create-React-App team прямо рекомендує використовувати замість CRA:

👉 Next.JS
👉 Remix

Походу треба робити нові курси 🥳

Всі ми тут дуже різні

Знаєте, тут зібралися дуже різні люди. Хтось школяр, хтось вчитель. Хтось обожнює спорт та качалку, хтось полюбляє дальній радіозв'язок. У когось ще перша робота по-переду, а хтось вже був керівником свого маленького агентства. Хтось вірить, а хтось впевнений атеїст.

І це різноманіття - джерело нашої сили і нашої слабкості. Тому що коли ми разом - ніхто нас не зупинить. Згадайте 2014 рік, рік підйому волонтерства, рік, коли ми перевіряли країну походження товарів і не купували нічого з росії. Згадайте 2022 рік, коли десятки мільйонів збиралися за день - для захисників, на помсту.

Але, нажаль, на цьому різноманітті дуже просто зіграти. Розділяй і володарюй - цей принцип чудово працював всі 30 років нашої незалежності. І, скоріше за все, буде працювати й далі, послаблюючи нас.

Тому в цей день - я хочу побажати всім нам - розуміння і трохи терпіння. Розуміння того, що хоча ми всі дійсно дуже різні, але всі ми Українці. Терпіння - пробачати маленькі огріхи тих хто поруч. І тоді, ніяка руснява наволоч навіть подивитись в нашу сторону не зможе. Бо як казали Швейцарці Вільгельму II - ми просто зробимо по два постріли і розійдемося.

Всім сили, розуміння та терпіння.

Всім привіт, 20.04 відбудеться досить цікава Онлайн/Офлайн подія - Front-End Meetup від Levi9

👉 React Query & RTK Query (як раз для нас)
👉 CSS Trends та що нового в CSS (CSS завжди буде корисним, хто піде - розкажіть і мені)
👉 Нові підходи в Angular - це вже не зовсім те, але підходи можуть бути цікавими для розширення кругозору.

Онлайн - безкоштовно, оффлайн в Києві за 150 гривень які підуть на благодійність.

Реєстрація - тут

А я ніколи не казав що я хороший дизайнер, але треба було "на зараз" 😅

П.М. Оцініть спойлер на YouTube

🔨 Корисні інструменти своїми руками🔨

💡Покажу вам такий маленький, але досить корисний мікро-хук, який дозволяє наочно бачити, чи працює ваш хук useCallback, чи ні. Він може стати в нагоді, якщо ви вирішили оптимізувати код за допомогою фіксації колбеків (які ми, до речі, вже розбирали на цьому відео)

const useTrackCallback = (
  callback,
  { callbackName = null, logWhenStable = true } = {}
) => {
  const cbRef = useRef(callback);
  const changed = cbRef.current !== callback;
  const cbName = callbackName ?? callback.name ?? 'unkown';

  if (changed) {
    cbRef.current = callback;
    console.log(`Callback "${cbName}" changed`);
    return;
  }

  if (logWhenStable) {
    console.log(`Callback "${cbName}" stable`);
  }
};

☺️ Як бачите, хук не складний. Він використовує хук useRef (до-речі, якщо вам цікаво про цей хук почути - напишіть в коментарі) для зберігання поточної версії колбеку і порівнює його з наступною. Якщо посилання різні, хук логує інформацію в консоль.

😺 Звісно його можна ще допрацювати, щоб, він наприклад, ніколи не працював на проді, але це вже не обов'язково.

🔨 Також аналогічний хук можна написати для того, щоб відслідковувати перерендери, яких за вашим розуміння не має бути. Можете несподівано дізнатися багато корисного і про React і про те, як поводить себе ваш застосунок в цілому.

@reactbeginners

П.М З цим новим лого ледь знайшов свій власний канал. В червоний його перефарбувати, чи що?

😎 Завтра (п'ятниця, 18:00) у нас відбудеться СЕКРЕТНИЙ СТРІМ

❓Як думаєте, чому він присвячений? Перший, хто вгадає - отримає фірмову термочашку в подарунок!

❤️ НАМ. ОДИН. РІК. (ЗАВТРА) ❤️

🎉 І завтра о 18:00 ми будемо це святкувати. З гостями, з подарунками, і головне з ВАМИ.

👉Приходьте ВСІ!

П.М. Про подаруночки буде вже завтра, бо їх ще треба вдобить 😁 Але будуть класні)

❤️ Сьогодні свято, а яке свято без подарунків? ❤️

І я скажу в мене їх аж чотири:

👉 Зручний та надійний рюкзак. Туди влізе і ноут і все до ноута)
👉 Фірмовий, компактний, металевий термос, який чудово підійде для кави тим, кому рано вставати.
👉 Сет носочків (5 пар) від Мавки, тієї самої яка зараз зібрала рекордну кількість глядачів з проміж усіх Українських фільмів
👉 І, також, цифрова копія другого Сталкеру.

А отримати їх не так щоб було дуже складно:

🐝 Перші три подарунки ми розіграємо під час прямого ефіру на вікторині. Хто перший дасть правильну відповідь - той і отримає подарунок!

🦄 А для того щоб прийняти участь в розіграші Сталкеру - вам просто потрібно написати пост в будь-якій соціальній мережі, дати посилання на наш Ютуб - youtube.com/@reactdev і відправити мені скріншот. Не знаєте що писати? Просто зробіть фото на фоні нашого YouTube) Копія буде розіграна серед усіх хто це зробить.

😊 Наче не складно

👉 Всіх чекаю на стрімі, сьогодні о 18:00, і не забудьте підписатися щоб не пропустити!

Зі святом нас!