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