📚 بخش ۱۶: استفاده از Default Props و PropTypes در React

۱. مقدمه — چرا این بخش مهم است؟

در React، وقتی یک کامپوننت props را دریافت می‌کند، هیچ تضمینی وجود ندارد که آن props ارسال شده باشد یا نوع درستی داشته باشد.
این می‌تواند باعث بروز باگ‌هایی شود که پیدا کردن‌شان سخت است.
به همین دلیل:

• Default Props کمک می‌کنند اگر props ارسال نشدند، مقدار پیش‌فرض دریافت کنند.
• PropTypes کمک می‌کنند نوع داده و الزامی بودن props را مشخص کنیم.

این‌ها باعث:

1. کاهش خطاهای ناگهانی
2. خوانایی بیشتر کد
3. مستندسازی خودکار کامپوننت‌ها

---

۲. تعریف Default Props

Default Props یعنی برای هر prop یک مقدار پیش‌فرض تعیین کنیم تا اگر کاربر آن prop را ارسال نکرد، مقدار پیش‌فرض استفاده شود.

این کار دو فایده دارد:

• کد ما یک حالت fallback دارد.
• نیاز به چک کردن undefined داخل JSX کمتر می‌شود.

---

۳. مثال ساده از Default Props

حالت بدون Default Props

function Button({ text }) {
  return <button>{text}</button>;
}

function App() {
  return <Button />; // متن undefined!
}

📌 اگر text داده نشود، خروجی به شکل undefined نمایش داده می‌شود.

---

حالت با Default Props

function Button({ text }) {
  return <button>{text}</button>;
}

Button.defaultProps = {
  text: "کلیک کنید",
};

function App() {
  return <Button />; // حالا متن "کلیک کنید" نمایش داده می‌شود
}

---

۴. روش‌های تعیین Default Props

روش ۱ — با defaultProps (شیوه قدیمی‌تر ولی هنوز پشتیبانی می‌شود)

MyComponent.defaultProps = {
  propName: defaultValue
};

روش ۲ — با Destructuring و مقدار پیش‌فرض (روش جدید و محبوب)

function Button({ text = "کلیک کنید" }) {
  return <button>{text}</button>;
}

📌 این روش کوتاه‌تر است و وقتی با هوک‌ها کار می‌کنیم هم بهتر جواب می‌دهد.

---

۵. نکات حرفه‌ای Default Props

• Default Props فقط وقتی اعمال می‌شوند که prop ارسال نشده باشد یا مقدار آن undefined باشد، نه وقتی null یا مقدار دیگری ارسال شود.
• ترتیب اولویت:
  1. مقدار ارسال‌شده توسط والد
  2. مقدار Default Props
  3. undefined (اگر هیچکدام وجود نداشته باشند)

---

۶. تعریف PropTypes

PropTypes یک ابزار درونی (در بسته‌ی جداگانه) برای بررسی نوع داده‌ی props و اجباری یا اختیاری بودن آن‌ها است.

مزایا:

• جلوگیری از ارسال مقدار اشتباه (مثلاً عدد به جای رشته)
• نمایش هشدار در console در محیط توسعه
• کمک به خود مستند بودن کد

---

۷. نصب PropTypes

ابتدا باید بسته‌ی prop-types را نصب کنیم:

npm install prop-types

---

۸. استفاده ساده از PropTypes

import PropTypes from 'prop-types';

function UserInfo({ name, age }) {
  return <p>{name} — {age} ساله</p>;
}

UserInfo.propTypes = {
  name: PropTypes.string.isRequired, // الزامی و باید رشته باشد
  age: PropTypes.number               // اختیاری و باید عدد باشد
};

export default UserInfo;

📌 رفتار:

• اگر name ارسال نشود یا مقدار غیر رشته باشد، هشدار قرمز در کنسول نمایش داده می‌شود (در حالت development).
• در production این پیام‌ها نمایش داده نمی‌شوند.

---

۹. انواع داده پشتیبانی‌شده در PropTypes

نوع داده	تعریف در PropTypes
رشته (string)	PropTypes.string
عدد (number)	PropTypes.number
بولین (boolean)	PropTypes.bool
تابع (function)	PropTypes.func
آرایه (array)	PropTypes.array
شیء (object)	PropTypes.object
JSX/Element	PropTypes.element
React Node (هر چیزی که قابل رندر باشد)	PropTypes.node
آرایه از یک نوع خاص	PropTypes.arrayOf(PropTypes.string)
شیء با ساختار خاص	PropTypes.shape({ key: PropTypes.type })
یکی از مقادیر خاص	PropTypes.oneOf(['a', 'b', 'c'])
یکی از چند نوع داده	PropTypes.oneOfType([PropTypes.string, PropTypes.number])

---

۱۰. مثال پیشرفته PropTypes

import PropTypes from 'prop-types';

function Product({ name, price, tags, details }) {
  return (
    <div>
      <h2>{name} — {price} تومان</h2>
      <ul>
        {tags.map((t, i) => <li key={i}>{t}</li>)}
      </ul>
      <p>رنگ: {details.color}</p>
      <p>سایز: {details.size}</p>
    </div>
  );
}

Product.propTypes = {
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
  details: PropTypes.shape({
    color: PropTypes.string,
    size: PropTypes.string
  })
};

---

۱۱. ترکیب Default Props و PropTypes

این دو را می‌توان با هم استفاده کرد:

function Greeting({ name }) {
  return <h1>سلام {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string
};

Greeting.defaultProps = {
  name: "کاربر مهمان"
};

📌 اگر والد مقدار name ندهد، مقدار پیش‌فرض استفاده می‌شود و PropTypes هم نوع آن را بررسی می‌کند.

---

۱۲. خطاها و اشتباهات رایج

❌ اشتباه: استفاده از defaultProps در نسخه‌های جدید React ۱۸ داخل کامپوننت‌های تابعی به صورت نادرست:
در نسخه‌های جدید معمولاً پیشنهاد می‌شود از مقدار پیش‌فرض در پارامتر استفاده کنیم چون کوتاه‌تر و واضح‌تر است.

❌ اشتباه: فکر کردن به اینکه PropTypes جلوی اجرای کد را می‌گیرد. → PropTypes فقط هشدار نمایش می‌دهد، جلوی رندر را نمی‌گیرد.

❌ ارسال null به جای undefined و انتظار اعمال شدن default prop:

<MyComponent title={null} /> // مقدار پیش‌فرض اعمال نمی‌شود!

---

۱۳. تمرین‌های عملی

تمرین ۱ — کارت کاربر

کامپوننتی بساز به نام UserCard که:

• props name, age, skills بگیرد.
• همه props به جز name اختیاری باشند.
• برای skills مقدار پیش‌فرض [] باشد.
• نوع همه props با PropTypes بررسی شود.

---

تمرین ۲ — دکمه چندمنظوره

Button بساز که:

• متن (label) پیش‌فرض = “کلیک”
• رویداد onClick اجباری باشد و تابع
• نوع label رشته‌ای باشد

---

تمرین ۳ — بلاگ پست

Post بساز که:

• عنوان (title)، متن (body)، تاریخ (date) بگیرد
• برای تاریخ از شکل YYYY-MM-DD استفاده شود و در PropTypes بررسی شود (با custom validator)

---

۱۴. نکات حرفه‌ای

• در پروژه‌های بزرگ، استفاده از PropTypes کمک می‌کند تیم از نوع props مطمئن باشد.
• در پروژه‌های TypeScript، نیازی به PropTypes نیست چون type-check در سطح زبان انجام می‌شود.
• همیشه برای props غیرضروری مقدار پیش‌فرض تعیین کنید تا از خطا جلوگیری شود.
• برای اشیاء یا آرایه‌های پیچیده، از shape یا arrayOf استفاده کنید.

---

۱۵. جمع‌بندی

• Default Props باعث جلوگیری از بروز مشکل زمانی که prop ارسال نشده باشد، می‌شوند.
• PropTypes نوع داده و الزامی بودن props را بررسی می‌کند (هشدار در توسعه).
• استفاده همزمان این دو برای ساخت کامپوننت‌های پایدار و بدون خطا توصیه می‌شود.
• رعایت این موارد کد پروژه را مستندتر، امن‌تر و قابل فهم‌تر می‌کند.