☕️ Ранок понеділка увірвався...
...як Майкл Скотт у кабінет бухгалтерії. Як би ми не хотіли закритися від нього в підсобці, зупинити цей процес неможливо.

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

Сьогодні з нами герої легендарного серіалу «Офіс»!
(І навіть не кажіть, що ви його не дивилися 😉)

#codica_humor

TikTok | Instagram | Telegram

🎯 Як відповідати на технічні питання на співбесіді?

#codica_interviews

✅ Хороша співбесіда — це підготовка.
❌ Погана — “та я по ходу розберусь“.

Навіщо потрібні propTypes? Що відбувається з ними у production збірці?

📌 Очікувана відповідь:

propTypes — це вбудований у React механізм динамічної типізації props під час виконання програми (runtime validation). Він потрібен для того, щоб виявляти помилки передачі неправильних типів даних на етапі розробки.
У production збірці перевірки propTypes повністю ігноруються задля оптимізації продуктивності та зменшення розміру бандлу.

📌 Базовий приклад:

import PropTypes from 'prop-types';

// ✅ Значення за замовчуванням задаємо через стандартні параметри ES6
function UserCard({ name, age, isAdmin = false }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Вік: {age}</p>
      {isAdmin && <span>Адміністратор</span>}
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isAdmin: PropTypes.bool
};

📌 Навіщо потрібні propTypes:

1️⃣ Документування компонентів: відкриваючи файл, розробник одразу бачить, які вхідні дані очікує компонент та які з них є обов‘язковими.

2️⃣ Раннє виявлення багів: якщо замість числа в age прийде рядок, React виведе чітке попередження в консоль браузера ще до того, як інтерфейс зламається.

3️⃣ Полегшення інтеграції: допомагає при роботі в команді, коли один розробник використовує компоненти, написані іншим.

📌 Що відбувається у production збірці:
При компіляції проєкту для production (наприклад, за допомогою Webpack, Vite чи Turbopack) логіка перевірки типів вимикається:

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

👉 Попередження в консоль більше не виводяться.

👉 Важливо: за допомогою плагінів бабеля (наприклад, babel-plugin-transform-react-remove-prop-types) самі обʼєкти propTypes повністю видаляються з фінального JS-коду, щоб зменшити вагу файлів (Bundle Size).

📌 propTypes vs TypeScript (додатковий бал від сеньйора):
👉 TypeScript працює на етапі компіляції (static type checking). Якщо передати не тот тип — проєкт просто не збереться.

👉 propTypes працюють в рантаймі (runtime check). Раніше їх іноді комбінували з TS для перевірки динамічних даних з API.
Проте сьогодні для валідації даних з бекенду в TS-проєктах використовують сучасні інструменти на кшталт Zod або Yup. У сучасній розробці потреба в propTypes майже повністю зникла, це спадщина (legacy) старих проєктів.

🍀 Пам’ятай: відповідай впевнено, коротко і по суті.

Вчіть не відповіді. Вчіть логіку. Удачі!

TikTok | Instagram | Telegram

Що читають у Codica 📚

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

Минулі наші розбори:
Head First — Програмування на JavaScript
Гарро фон Зенгер — 36 стратегем для керівника
Head First — Патерни проєктування